Public/TrustDataSpace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目结构

Browse Source 
- 创建基础HTML页面布局
- 添加医疗场景页面
- 设置基本页面导航结构"
This commit is contained in:
sichan 2025-01-03 09:41:43 +08:00
commit d267174852
19 changed files with 2119 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md Normal file
View File

@ -0,0 +1,3 @@
# 可信数据空间门户
## 项目结构

114
assets/css/styles.css Normal file
View File

@ -0,0 +1,114 @@
/* 进度步骤样式 */
.progress-steps {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
}
.step {
text-align: center;
position: relative;
z-index: 1;
}
.step-circle {
width: 30px;
height: 30px;
background-color: #fff;
border: 2px solid #dee2e6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 5px;
}
.step.active .step-circle {
border-color: #0d6efd;
background-color: #0d6efd;
color: #fff;
}
.step.completed .step-circle {
border-color: #198754;
background-color: #198754;
color: #fff;
}
.step-text {
font-size: 0.875rem;
color: #6c757d;
}
.step.active .step-text {
color: #0d6efd;
}
.step.completed .step-text {
color: #198754;
}
/* 连接线 */
.progress-steps::before {
content: '';
position: absolute;
top: 15px;
left: 0;
right: 0;
height: 2px;
background-color: #dee2e6;
z-index: 0;
}
/* 响应式调整 */
@media (max-width: 768px) {
.step-text {
font-size: 0.75rem;
}
.step-circle {
width: 30px;
height: 30px;
}
}
/* 表单验证样式 */
.was-validated .form-control:invalid,
.form-control.is-invalid {
border-color: #dc3545;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
/* 自定义颜色 */
.text-purple {
color: #6f42c1;
}
.btn-purple {
background-color: #6f42c1;
border-color: #6f42c1;
color: #fff;
}
.btn-purple:hover {
background-color: #5a32a3;
border-color: #5a32a3;
color: #fff;
}
.text-orange {
color: #fd7e14;
}
.btn-orange {
background-color: #fd7e14;
border-color: #fd7e14;
color: #fff;
}
.btn-orange:hover {
background-color: #e66a02;
border-color: #e66a02;
color: #fff;
}

BIN
assets/images/hero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

16
assets/js/components.js Normal file
View File

@ -0,0 +1,16 @@
// 加载组件
document.addEventListener('DOMContentLoaded', function() {
// 加载 header
fetch('/components/header/header.html')
.then(response => response.text())
.then(data => {
document.getElementById('header').innerHTML = data;
});
// 加载 footer
fetch('/components/footer/footer.html')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
});

57
assets/js/landing.js Normal file
View File

@ -0,0 +1,57 @@
document.addEventListener('DOMContentLoaded', function() {
// 市场趋势图表
const marketTrendChart = echarts.init(document.getElementById('marketTrendChart'));
marketTrendChart.setOption({
title: {
text: '数据要素市场规模趋势',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
bottom: '5%'
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['2020', '2021', '2022', '2023', '2024E']
},
yAxis: {
type: 'value',
name: '亿元'
},
series: [
{
name: '数据交易规模',
type: 'bar',
data: [200, 400, 600, 800, 1000],
itemStyle: {
color: '#0d6efd'
}
},
{
name: '数据融资规模',
type: 'line',
data: [2, 4, 6, 8, 10],
itemStyle: {
color: '#198754'
}
}
]
});
// 监听窗口大小变化
window.addEventListener('resize', function() {
marketTrendChart.resize();
});
});

154
assets/js/script.js Normal file
View File

@ -0,0 +1,154 @@
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 = '下一步';
}
}
// 处理接入方式选择
const accessMethodSelect = document.querySelector('select');
const accessMethodForms = document.getElementById('accessMethodForms');
accessMethodSelect.addEventListener('change', function(e) {
const method = e.target.value;
accessMethodForms.innerHTML = '';
if (method === 'file') {
accessMethodForms.innerHTML = `
<div class="mb-3">
<label class="form-label">选择文件</label>
<input type="file" class="form-control" required>
<div class="form-text">支持的格式：CSV, Excel, JSON</div>
</div>
`;
} else if (method === 'api') {
accessMethodForms.innerHTML = `
<div class="mb-3">
<label class="form-label">API 地址</label>
<input type="url" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">认证令牌</label>
<input type="text" class="form-control" required>
</div>
<button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
`;
} else if (method === 'database') {
accessMethodForms.innerHTML = `
<div class="mb-3">
<label class="form-label">数据库类型</label>
<select class="form-select" required>
<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>
<button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
`;
}
});
// 测试连接
window.testConnection = function() {
// 显示加载状态
const btn = event.target;
const originalText = btn.textContent;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 测试中...';
// 模拟API调用
setTimeout(() => {
btn.disabled = false;
btn.textContent = originalText;
alert('连接测试成功！');
}, 2000);
};
// 表单验证
function validateCurrentStep() {
const currentStepElement = steps[currentStep];
const inputs = currentStepElement.querySelectorAll('input, select');
let isValid = true;
inputs.forEach(input => {
if (input.hasAttribute('required') && !input.value) {
isValid = false;
input.classList.add('is-invalid');
} else {
input.classList.remove('is-invalid');
}
});
return isValid;
}
// 按钮事件监听
prevBtn.addEventListener('click', () => {
if (currentStep > 0) {
currentStep--;
updateSteps();
}
});
nextBtn.addEventListener('click', () => {
if (!validateCurrentStep()) {
return;
}
if (currentStep < steps.length - 1) {
currentStep++;
updateSteps();
} else {
// 提交表单
if (form.checkValidity()) {
alert('表单提交成功！');
// 这里添加实际的表单提交逻辑
}
}
});
// 初始化显示
updateSteps();
});

9
components/footer/footer.html Normal file
View File

@ -0,0 +1,9 @@
<footer class="bg-light py-4 mt-auto">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<p class="mb-0 text-muted">&copy; 2024 可信数据空间. All rights reserved.</p>
</div>
</div>
</div>
</footer>

23
components/header/header.html Normal file
View File

@ -0,0 +1,23 @@
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="/">
<i class="bi bi-database-check"></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="/pages/landing.html" target="_blank" title="访问门户网站">
<i class="bi bi-box-arrow-up-right"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-person"></i> 登录</a>
</li>
</ul>
</div>
</div>
</nav>

194
index.html Normal file
View File

@ -0,0 +1,194 @@
<!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">
</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 g-4">
<!-- 数据接入卡片 -->
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-cloud-upload fs-2 text-primary me-2"></i>
<h5 class="card-title mb-0">数据接入</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">安全、便捷地接入您的数据资产，支持多种数据接入方式，确保数据安全合规。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>文件上传</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>API接口</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>数据库连接</li>
</ul>
<a href="pages/data-access.html" class="btn btn-primary w-100">立即接入</a>
</div>
</div>
</div>
</div>
<!-- 数据资产管理卡片 -->
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-folder2-open fs-2 text-success me-2"></i>
<h5 class="card-title mb-0">数据资产管理</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">全面的数据资产管理功能，助您高效管理和监控数据资产。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>资产目录</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>质量监控</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>使用分析</li>
</ul>
<a href="pages/data-management.html" class="btn btn-success w-100">开始管理</a>
</div>
</div>
</div>
</div>
<!-- 数据资产运营卡片 -->
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-graph-up fs-2 text-info me-2"></i>
<h5 class="card-title mb-0">数据资产运营</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">专业的数据资产运营工具，助力数据价值最大化。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>数据分析</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>价值评估</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>运营报告</li>
</ul>
<a href="pages/data-operation.html" class="btn btn-info w-100 text-white">运营分析</a>
</div>
</div>
</div>
</div>
</div>
<!-- 第二行功能卡片 -->
<div class="row g-4 mt-4">
<!-- 数据资产登记卡片 -->
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-journal-check fs-2 text-purple me-2"></i>
<h5 class="card-title mb-0">数据资产登记</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">专业的数据资产登记服务，助力企业完成数据确权和入表。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>资产确权</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>价值评估</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>资产入表</li>
</ul>
<a href="#" class="btn btn-purple w-100">开始登记</a>
</div>
</div>
</div>
</div>
<!-- 数据沙箱隐私计算卡片 -->
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-shield-lock fs-2 text-danger me-2"></i>
<h5 class="card-title mb-0">数据沙箱隐私计算</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">安全可信的隐私计算环境，实现数据可用不可见。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>隐私保护</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>安全计算</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>结果可信</li>
</ul>
<a href="#" class="btn btn-danger w-100">立即体验</a>
</div>
</div>
</div>
</div>
<!-- 数据运营场景卡片 -->
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-boxes fs-2 text-orange me-2"></i>
<h5 class="card-title mb-0">数据运营场景</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">丰富的数据运营场景，助力企业挖掘数据价值。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>场景定制</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>模型训练</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>价值变现</li>
</ul>
<a href="pages/data-scenarios.html" class="btn btn-orange w-100">探索场景</a>
</div>
</div>
</div>
</div>
</div>
<!-- 平台优势 -->
<div class="row mt-5">
<div class="col-12">
<h3 class="text-center mb-4">平台优势</h3>
<div class="row g-4">
<div class="col-md-3">
<div class="text-center">
<i class="bi bi-shield-check fs-1 text-primary"></i>
<h5 class="mt-2">安全可靠</h5>
<p class="text-muted">多重安全防护，确保数据安全</p>
</div>
</div>
<div class="col-md-3">
<div class="text-center">
<i class="bi bi-lightning fs-1 text-warning"></i>
<h5 class="mt-2">高效便捷</h5>
<p class="text-muted">快速接入，便捷管理</p>
</div>
</div>
<div class="col-md-3">
<div class="text-center">
<i class="bi bi-gear fs-1 text-success"></i>
<h5 class="mt-2">功能强大</h5>
<p class="text-muted">全方位数据资产管理</p>
</div>
</div>
<div class="col-md-3">
<div class="text-center">
<i class="bi bi-graph-up-arrow fs-1 text-info"></i>
<h5 class="mt-2">价值提升</h5>
<p class="text-muted">数据价值深度挖掘</p>
</div>
</div>
</div>
</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 src="assets/js/script.js"></script>
</body>
</html>

512
pages/data-access.html Normal file
View File

@ -0,0 +1,512 @@
<!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>

19
pages/data-management.html Normal file
View File

@ -0,0 +1,19 @@
<!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 href="../assets/css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h2>数据资产管理</h2>
<p>这里是数据资产管理的内容。</p>
<!-- 可以在这里添加更多的表单或功能 -->
</div>
<script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../assets/js/script.js"></script>
</body>
</html>

19
pages/data-operation.html Normal file
View File

@ -0,0 +1,19 @@
<!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 href="../assets/css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h2>数据资产运营</h2>
<p>这里是数据资产运营的内容。</p>
<!-- 可以在这里添加更多的表单或功能 -->
</div>
<script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../assets/js/script.js"></script>
</body>
</html>

262
pages/data-scenarios.html Normal file
View File

@ -0,0 +1,262 @@
<!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">
</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="d-flex justify-content-between align-items-center mb-4">
<div>
<h2 class="mb-1">数据运营场景</h2>
<p class="text-muted mb-0">管理和监控您的数据应用场景</p>
</div>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newScenarioModal">
<i class="bi bi-plus-lg me-2"></i>新建场景
</button>
</div>
<!-- 筛选和搜索栏 -->
<div class="card mb-4">
<div class="card-body">
<div class="row g-3">
<div class="col-md-3">
<select class="form-select">
<option value="">所有行业</option>
<option>医疗健康</option>
<option>金融科技</option>
<option>工业制造</option>
<option>供应链</option>
</select>
</div>
<div class="col-md-3">
<select class="form-select">
<option value="">所有状态</option>
<option>运行中</option>
<option>已暂停</option>
<option>配置中</option>
</select>
</div>
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索场景名称">
<button class="btn btn-outline-secondary">
<i class="bi bi-search"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 场景卡片列表 -->
<div class="row g-4">
<!-- 运行中的场景 -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<span class="badge bg-success">运行中</span>
<div class="dropdown">
<button class="btn btn-link text-muted p-0" data-bs-toggle="dropdown">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="scenario-medical.html" target="_blank"><i class="bi bi-eye me-2"></i>查看</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-pause me-2"></i>暂停</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>配置</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash me-2"></i>删除</a></li>
</ul>
</div>
</div>
<h5 class="card-title">
<a href="scenario-medical.html" class="text-decoration-none text-dark" target="_blank">
医疗数据分析平台
<i class="bi bi-box-arrow-up-right text-muted ms-1 small"></i>
</a>
</h5>
<p class="text-muted small mb-3">基于患者治疗数据的疾病研究分析平台</p>
<div class="mb-3">
<div class="d-flex justify-content-between text-muted small mb-2">
<span>数据处理量</span>
<span>2.5TB</span>
</div>
<div class="progress" style="height: 6px;">
<div class="progress-bar" style="width: 75%"></div>
</div>
</div>
<div class="d-flex align-items-center text-muted small">
<i class="bi bi-clock me-1"></i>
<span>最近更新：2024-01-20</span>
</div>
<!-- 快捷操作按钮 -->
<div class="mt-3 pt-3 border-top">
<a href="scenario-medical.html" class="btn btn-sm btn-outline-primary w-100" target="_blank">
<i class="bi bi-graph-up me-1"></i>查看详情
</a>
</div>
</div>
</div>
</div>
<!-- 配置中的场景 -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<span class="badge bg-warning text-dark">配置中</span>
<div class="dropdown">
<button class="btn btn-link text-muted p-0" data-bs-toggle="dropdown">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="bi bi-eye me-2"></i>查看</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>配置</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash me-2"></i>删除</a></li>
</ul>
</div>
</div>
<h5 class="card-title">金融风控模型</h5>
<p class="text-muted small mb-3">基于用户信用数据的风险评估模型</p>
<div class="mb-3">
<div class="d-flex justify-content-between text-muted small mb-2">
<span>配置进度</span>
<span>60%</span>
</div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-warning" style="width: 60%"></div>
</div>
</div>
<div class="d-flex align-items-center text-muted small">
<i class="bi bi-clock me-1"></i>
<span>创建时间：2024-01-15</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 新建场景模态框 -->
<div class="modal fade" id="newScenarioModal" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">新建数据运营场景</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!-- 主要场景模板 -->
<h6 class="mb-3">推荐模板</h6>
<div class="row g-4">
<!-- 场景模板选项 -->
<div class="col-md-4">
<div class="card h-100 border-primary">
<div class="card-body text-center">
<i class="bi bi-heart-pulse display-4 text-primary mb-3"></i>
<h5>医疗数据分析</h5>
<div class="text-muted small mb-3">
<p class="mb-2">适用场景：疾病研究、药物研发</p>
<p class="mb-2">数据类型：治疗数据、基因数据</p>
<p class="mb-0">特色功能：隐私计算、数据脱敏</p>
</div>
<button class="btn btn-outline-primary btn-sm">选择模板</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-bank display-4 text-muted mb-3"></i>
<h5>金融风控分析</h5>
<div class="text-muted small mb-3">
<p class="mb-2">适用场景：风险评估、信贷推荐</p>
<p class="mb-2">数据类型：信用数据、交易数据</p>
<p class="mb-0">特色功能：同态加密、分类分级</p>
</div>
<button class="btn btn-outline-secondary btn-sm">选择模板</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-gear-wide display-4 text-muted mb-3"></i>
<h5>工业数据分析</h5>
<div class="text-muted small mb-3">
<p class="mb-2">适用场景：设备优化、故障预测</p>
<p class="mb-2">数据类型：设备运行数据、传感器数据</p>
<p class="mb-0">特色功能：实时分析、预测预警</p>
</div>
<button class="btn btn-outline-secondary btn-sm">选择模板</button>
</div>
</div>
</div>
</div>
<!-- 更多场景模板 -->
<h6 class="mt-4 mb-3">更多模板</h6>
<div class="row g-4">
<div class="col-md-3">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-truck display-4 text-muted mb-2"></i>
<h6>物流数据分析</h6>
<p class="text-muted small mb-3">货物数据共享协作</p>
<button class="btn btn-outline-secondary btn-sm">选择</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-buildings display-4 text-muted mb-2"></i>
<h6>智慧城市分析</h6>
<p class="text-muted small mb-3">城市数据融合分析</p>
<button class="btn btn-outline-secondary btn-sm">选择</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-cpu display-4 text-muted mb-2"></i>
<h6>AI模型训练</h6>
<p class="text-muted small mb-3">数据集训练优化</p>
<button class="btn btn-outline-secondary btn-sm">选择</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-plus-lg display-4 text-muted mb-2"></i>
<h6>自定义模板</h6>
<p class="text-muted small mb-3">创建空白模板</p>
<button class="btn btn-outline-secondary btn-sm">创建</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer"></div>
<script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../assets/js/components.js"></script>
</body>
</html>

218
pages/data-visualization.html Normal file
View File

@ -0,0 +1,218 @@
<!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">
<!-- 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<!-- Header -->
<div id="header"></div>
<div class="container my-5">
<!-- 概览数据 -->
<div class="row mb-5">
<div class="col-12">
<h2 class="text-center mb-4">服务业绩概览</h2>
<div class="row g-4">
<div class="col-md-3">
<div class="card border-primary h-100">
<div class="card-body text-center">
<i class="bi bi-building fs-1 text-primary mb-3"></i>
<h3 class="card-title">10+</h3>
<p class="card-text">服务企业数量</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card border-success h-100">
<div class="card-body text-center">
<i class="bi bi-currency-yen fs-1 text-success mb-3"></i>
<h3 class="card-title">5000万+</h3>
<p class="card-text">资产评估总额</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card border-info h-100">
<div class="card-body text-center">
<i class="bi bi-graph-up-arrow fs-1 text-info mb-3"></i>
<h3 class="card-title">100万/年</h3>
<p class="card-text">交易金额</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card border-warning h-100">
<div class="card-body text-center">
<i class="bi bi-bank fs-1 text-warning mb-3"></i>
<h3 class="card-title">数千万</h3>
<p class="card-text">融资意向额度</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 行业分布图表 -->
<div class="row mb-5">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">行业分布</h5>
<div id="industryChart" style="height: 400px;"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">数据资产规模</h5>
<div id="dataScaleChart" style="height: 400px;"></div>
</div>
</div>
</div>
</div>
<!-- 案例展示 -->
<div class="row mb-5">
<div class="col-12">
<h2 class="text-center mb-4">典型案例</h2>
<div class="row g-4">
<!-- 企业案例 -->
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<i class="bi bi-building text-primary me-2"></i>
企业案例
</h5>
<p class="card-text">为全国各地十余家企业提供数据资产咨询、入表和运营服务，涵盖智慧城市、智慧交通、智慧农业等多个领域。</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>资产入表金额：500万+</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>评估金额：5000万+</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>年交易金额：100万</li>
</ul>
</div>
</div>
</div>
<!-- 交通行业案例 -->
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<i class="bi bi-truck text-success me-2"></i>
交通行业案例
</h5>
<p class="card-text">在珠海市、宜宾市、内江市完成了当地公交公司的公交类数据、智慧停车数据等交通领域的数据资产服务。</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>GPS数据：5亿+条</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>交易数据：1.5亿+条</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>评估金额：3000万+</li>
</ul>
</div>
</div>
</div>
<!-- 政府案例 -->
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<i class="bi bi-bank text-info me-2"></i>
政府案例
</h5>
<p class="card-text">在多个地区投资建设可信数据空间、数据要素运营服务站或算力中心。</p>
<ul class="list-unstyled">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>投资规模：2亿+</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>数据量：80亿+条</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>交易次数：1000万+</li>
</ul>
</div>
</div>
</div>
</div>
</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() {
// 行业分布图表
const industryChart = echarts.init(document.getElementById('industryChart'));
industryChart.setOption({
title: {
text: '行业分布'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}家 ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
type: 'pie',
radius: '50%',
data: [
{ value: 4, name: '智慧城市' },
{ value: 3, name: '智慧交通' },
{ value: 2, name: '智慧农业' },
{ value: 3, name: '其他' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});
// 数据资产规模图表
const dataScaleChart = echarts.init(document.getElementById('dataScaleChart'));
dataScaleChart.setOption({
title: {
text: '数据资产规模'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['2020', '2021', '2022', '2023', '2024']
},
yAxis: {
type: 'value',
name: '亿条'
},
series: [{
data: [10, 25, 40, 60, 80],
type: 'line',
smooth: true,
areaStyle: {}
}]
});
// 监听窗口大小变化，调整图表大小
window.addEventListener('resize', function() {
industryChart.resize();
dataScaleChart.resize();
});
});
</script>
</body>
</html>

234
pages/landing.html Normal file
View File

@ -0,0 +1,234 @@
<!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">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<!-- Hero Section -->
<section class="hero-section text-white py-5" style="background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);">
<div class="container py-5">
<div class="row align-items-center" style="min-height: 400px;">
<div class="col-lg-6">
<h1 class="display-4 fw-bold mb-4">释放数据要素价值</h1>
<p class="lead mb-4">专业的数据资产服务机构，为企业提供确权、审计、评估、治理、运营的全生命周期服务</p>
<div class="d-flex gap-3">
<a href="#contact" class="btn btn-light btn-lg">立即咨询</a>
<a href="../index.html" class="btn btn-outline-light btn-lg">了解更多</a>
</div>
</div>
<div class="col-lg-6">
<img src="../assets/images/hero.png" alt="数据价值" class="img-fluid" style="max-height: 400px; width: auto;">
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-5 bg-light">
<div class="container">
<div class="row g-4 text-center">
<div class="col-md-3">
<div class="p-4 bg-white rounded-3 shadow-sm">
<i class="bi bi-building display-4 text-primary"></i>
<h2 class="mt-3">200+</h2>
<p class="text-muted mb-0">完成数据资产入表企业</p>
</div>
</div>
<div class="col-md-3">
<div class="p-4 bg-white rounded-3 shadow-sm">
<i class="bi bi-currency-yen display-4 text-success"></i>
<h2 class="mt-3">10亿+</h2>
<p class="text-muted mb-0">完成数据资产融资</p>
</div>
</div>
<div class="col-md-3">
<div class="p-4 bg-white rounded-3 shadow-sm">
<i class="bi bi-graph-up display-4 text-info"></i>
<h2 class="mt-3">1000亿</h2>
<p class="text-muted mb-0">年度数据交易规模</p>
</div>
</div>
<div class="col-md-3">
<div class="p-4 bg-white rounded-3 shadow-sm">
<i class="bi bi-people display-4 text-warning"></i>
<h2 class="mt-3">100+</h2>
<p class="text-muted mb-0">数据服务商</p>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-5" id="services">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold">全方位数据资产服务</h2>
<p class="lead text-muted">一站式解决企业数据要素化难题</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card border-0 h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-shield-check fs-2 text-primary me-3"></i>
<h4 class="mb-0">数据确权</h4>
</div>
<p class="card-text">专业的数据确权服务，帮助企业明确数据权属，规避法律风险</p>
<ul class="list-unstyled 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>
</div>
<div class="col-md-4">
<div class="card border-0 h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-clipboard-data fs-2 text-success me-3"></i>
<h4 class="mb-0">数据审计</h4>
</div>
<p class="card-text">全面的数据资产盘点与审计，为企业建立完整的数据资产台账</p>
<ul class="list-unstyled 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>
</div>
<div class="col-md-4">
<div class="card border-0 h-100 shadow-sm">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-gear-wide-connected fs-2 text-info me-3"></i>
<h4 class="mb-0">数据运营</h4>
</div>
<p class="card-text">专业的数据运营服务，助力企业实现数据价值最大化</p>
<ul class="list-unstyled 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>
</div>
</div>
</div>
</section>
<!-- Cases Section -->
<section class="py-5 bg-light" id="cases">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold">成功案例</h2>
<p class="lead text-muted">多个行业的实践经验</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card border-0 h-100 shadow-sm">
<div class="card-body">
<span class="badge bg-primary mb-3">智慧交通</span>
<h4>珠海公交数据资产化</h4>
<p>完成GPS轨迹数据、支付交易数据等多类型交通数据的资产化工作，评估金额超3000万元。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">评估金额：3000万+</span>
<a href="#" class="btn btn-outline-primary">查看详情</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 h-100 shadow-sm">
<div class="card-body">
<span class="badge bg-success mb-3">智慧城市</span>
<h4>新津区数据空间建设</h4>
<p>投资建设可信数据空间，接入300余家企业，实现数据安全合规共享交易。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">投资规模：2亿+</span>
<a href="#" class="btn btn-outline-success">查看详情</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 h-100 shadow-sm">
<div class="card-body">
<span class="badge bg-info mb-3">智慧农业</span>
<h4>农业数据资产入表</h4>
<p>完成农业生产、销售、物流等数据的资产化工作，助力企业获得数据要素融资。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">融资额度：500万+</span>
<a href="#" class="btn btn-outline-info">查看详情</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Market Insight Section -->
<section class="py-5">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold">市场洞察</h2>
<p class="lead text-muted">把握数据要素市场发展趋势</p>
</div>
<div class="row align-items-center">
<div class="col-lg-6">
<div id="marketTrendChart" style="height: 400px;"></div>
</div>
<div class="col-lg-6">
<h3 class="mb-4">数据要素市场蓬勃发展</h3>
<ul class="list-unstyled">
<li class="mb-3">
<i class="bi bi-arrow-right-circle-fill text-primary me-2"></i>
全国已有200余家企业完成数据资产入表
</li>
<li class="mb-3">
<i class="bi bi-arrow-right-circle-fill text-primary me-2"></i>
100余家企业完成数据资产融资，融资金额超10亿元
</li>
<li class="mb-3">
<i class="bi bi-arrow-right-circle-fill text-primary me-2"></i>
全国已有50家以上数据交易所，年度数据交易规模达1000亿元
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="py-5 bg-light" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="display-5 fw-bold mb-4">开启数据价值之旅</h2>
<p class="lead text-muted mb-5">立即联系我们，获取专业解决方案</p>
<div class="d-flex justify-content-center gap-3">
<a href="#" class="btn btn-primary btn-lg">在线咨询</a>
<a href="#" class="btn btn-outline-primary btn-lg">预约演示</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<div id="footer"></div>
<script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../assets/js/components.js"></script>
<script src="../assets/js/landing.js"></script>
</body>
</html>

257
pages/scenario-medical.html Normal file
View File

@ -0,0 +1,257 @@
<!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">
</head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid py-4 flex-grow-1">
<!-- 场景基本信息 -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<a href="javascript:window.close();" class="btn btn-link text-muted p-0 mb-2">
<i class="bi bi-arrow-left me-1"></i>返回场景列表
</a>
<h4 class="mb-1">医疗数据分析平台
<span class="badge bg-success ms-2">运行中</span>
</h4>
<p class="text-muted mb-0">
<span class="me-3"><i class="bi bi-calendar3 me-1"></i>运行时间：2024-01-01 至 2024-12-31</span>
<span class="me-3"><i class="bi bi-building me-1"></i>授权运营方：某医疗科技有限公司</span>
<span><i class="bi bi-person-check me-1"></i>项目负责人：张三</span>
</p>
</div>
<div class="btn-group">
<button class="btn btn-outline-primary">
<i class="bi bi-gear me-1"></i>配置
</button>
<button class="btn btn-outline-danger">
<i class="bi bi-pause-fill me-1"></i>暂停
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 数据概览 -->
<div class="row g-4 mb-4">
<div class="col-md-3">
<div class="card bg-primary text-white">
<div class="card-body">
<h6 class="card-title">数据资产总量</h6>
<h3 class="mb-0">2.5 TB</h3>
<small>较上月增长 12%</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-success text-white">
<div class="card-body">
<h6 class="card-title">本月收益</h6>
<h3 class="mb-0">¥ 125,000</h3>
<small>较上月增长 8%</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-info text-white">
<div class="card-body">
<h6 class="card-title">授权用户数</h6>
<h3 class="mb-0">15</h3>
<small>本月新增 3 个</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-warning text-white">
<div class="card-body">
<h6 class="card-title">风险预警</h6>
<h3 class="mb-0">2</h3>
<small>需要关注</small>
</div>
</div>
</div>
</div>
<div class="row g-4">
<!-- 收益趋势 -->
<div class="col-md-8">
<div class="card">
<div class="card-body">
<h5 class="card-title">收益趋势分析</h5>
<div id="profitChart" style="height: 300px;"></div>
</div>
</div>
</div>
<!-- 数据资产分布 -->
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">数据资产分布</h5>
<div id="assetChart" style="height: 300px;"></div>
</div>
</div>
</div>
<!-- 授权用户监控 -->
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">授权用户监控</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>用户</th>
<th>授权数据</th>
<th>授权时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>某研究院</td>
<td>患者治疗数据</td>
<td>2024-01-15</td>
<td><span class="badge bg-success">正常</span></td>
</tr>
<tr>
<td>某医药公司</td>
<td>基因检测数据</td>
<td>2024-01-10</td>
<td><span class="badge bg-warning">待续期</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- 风险分析 -->
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">风险分析</h5>
</div>
<div class="card-body">
<div class="alert alert-warning">
<h6><i class="bi bi-exclamation-triangle me-2"></i>数据访问异常</h6>
<p class="small mb-0">检测到某研究院在非常规时间段大量访问患者数据</p>
</div>
<div class="alert alert-danger">
<h6><i class="bi bi-shield-exclamation me-2"></i>数据导出预警</h6>
<p class="small mb-0">某医药公司尝试导出超出授权范围的数据</p>
</div>
<div id="riskChart" style="height: 200px;"></div>
</div>
</div>
</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 src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
// 收益趋势图
const profitChart = echarts.init(document.getElementById('profitChart'));
profitChart.setOption({
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: {
type: 'value',
name: '收益(万元)'
},
series: [{
name: '月度收益',
data: [8.5, 9.8, 11.2, 10.5, 11.8, 12.5],
type: 'line',
smooth: true,
areaStyle: {}
}]
});
// 数据资产分布图
const assetChart = echarts.init(document.getElementById('assetChart'));
assetChart.setOption({
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: '数据资产',
type: 'pie',
radius: '50%',
data: [
{value: 1200, name: '治疗数据'},
{value: 800, name: '基因数据'},
{value: 500, name: '检验数据'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});
// 风险趋势图
const riskChart = echarts.init(document.getElementById('riskChart'));
riskChart.setOption({
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
name: '风险事件'
},
series: [{
name: '风险事件',
type: 'bar',
data: [2, 1, 0, 3, 2, 1, 2],
itemStyle: {
color: '#ffc107'
}
}]
});
// 响应式调整
window.addEventListener('resize', function() {
profitChart.resize();
assetChart.resize();
riskChart.resize();
});
</script>
</body>
</html>

14
vendor/bootstrap/bootstrap-icons.min.css vendored Normal file
View File

@ -0,0 +1,14 @@
@font-face {
font-family: "bootstrap-icons";
src: url("fonts/bootstrap-icons.woff2") format("woff2"),
url("fonts/bootstrap-icons.woff") format("woff");
}
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
font-family: bootstrap-icons !important;
/* 其他样式保持不变 */
}
/* 其他图标样式保持不变 */

7
vendor/bootstrap/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
vendor/bootstrap/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long