508 lines
26 KiB
HTML
508 lines
26 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">
|
||
</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-4">
|
||
<div class="col-12">
|
||
<h2>数据资产钱包</h2>
|
||
<nav aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="../index.html">首页</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">数据资产钱包</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据资产概览 -->
|
||
<div class="row g-4 mb-5">
|
||
<div class="col-md-4">
|
||
<div class="card bg-primary text-white">
|
||
<div class="card-body">
|
||
<h5 class="card-title">总资产价值</h5>
|
||
<h2 class="mb-0">¥ 328,500</h2>
|
||
<small>较上月 +12.5%</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card bg-success text-white">
|
||
<div class="card-body">
|
||
<h5 class="card-title">本月收益</h5>
|
||
<h2 class="mb-0">¥ 12,300</h2>
|
||
<small>较上月 +8.3%</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card bg-info text-white">
|
||
<div class="card-body">
|
||
<h5 class="card-title">数据调用次数</h5>
|
||
<h2 class="mb-0">1,280</h2>
|
||
<small>较上月 +15.2%</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据资源目录 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<h5 class="card-title mb-0">数据资源目录</h5>
|
||
<button class="btn btn-primary btn-sm">添加数据资源</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>数据名称</th>
|
||
<th>数据分类</th>
|
||
<th>密级</th>
|
||
<th>数据来源</th>
|
||
<th>数据大小</th>
|
||
<th>数据增量</th>
|
||
<th>更新频率</th>
|
||
<th>数据质量</th>
|
||
<th>权属证明</th>
|
||
<th>合规状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>企业信用数据</td>
|
||
<td>
|
||
<span class="badge bg-primary">结构化</span>
|
||
<span class="badge bg-secondary">企业信用</span>
|
||
</td>
|
||
<td><span class="badge bg-warning">二级敏感</span></td>
|
||
<td>工商系统</td>
|
||
<td>2.5TB</td>
|
||
<td>+50GB/月</td>
|
||
<td>每日更新</td>
|
||
<td>
|
||
<div class="progress" style="height: 6px;">
|
||
<div class="progress-bar bg-success" style="width: 95%"></div>
|
||
</div>
|
||
<small>95%</small>
|
||
</td>
|
||
<td><a href="#" class="text-primary">查看证书</a></td>
|
||
<td><span class="badge bg-success">已认证</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">详情</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>医疗影像数据</td>
|
||
<td>
|
||
<span class="badge bg-info">非结构化</span>
|
||
<span class="badge bg-secondary">医疗诊断</span>
|
||
</td>
|
||
<td><span class="badge bg-danger">一级敏感</span></td>
|
||
<td>省医院</td>
|
||
<td>15TB</td>
|
||
<td>+200GB/月</td>
|
||
<td>实时更新</td>
|
||
<td>
|
||
<div class="progress" style="height: 6px;">
|
||
<div class="progress-bar bg-success" style="width: 98%"></div>
|
||
</div>
|
||
<small>98%</small>
|
||
</td>
|
||
<td><a href="#" class="text-primary">查看证书</a></td>
|
||
<td><span class="badge bg-success">已认证</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">详情</button>
|
||
</td>
|
||
</tr>
|
||
<!-- 更多数据资源条目 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收益明细和分析 -->
|
||
<div class="row g-4">
|
||
<!-- 收益构成分析 -->
|
||
<div class="col-md-6">
|
||
<div class="card h-100">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">收益构成分析</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<h6>按业务类型</h6>
|
||
<div class="progress mb-2" style="height: 25px;">
|
||
<div class="progress-bar bg-primary" style="width: 60%">数据授权 60%</div>
|
||
<div class="progress-bar bg-success" style="width: 25%">模型训练 25%</div>
|
||
<div class="progress-bar bg-info" style="width: 15%">查询服务 15%</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h6>按行业分布</h6>
|
||
<div class="progress mb-2" style="height: 25px;">
|
||
<div class="progress-bar bg-primary" style="width: 40%">金融 40%</div>
|
||
<div class="progress-bar bg-success" style="width: 30%">政务 30%</div>
|
||
<div class="progress-bar bg-info" style="width: 20%">医疗 20%</div>
|
||
<div class="progress-bar bg-warning" style="width: 10%">其他 10%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收益明细表格 -->
|
||
<div class="col-md-6">
|
||
<div class="card h-100">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<h5 class="card-title mb-0">收益明细</h5>
|
||
<div class="dropdown">
|
||
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||
本月
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="dropdown-item" href="#">本月</a></li>
|
||
<li><a class="dropdown-item" href="#">上月</a></li>
|
||
<li><a class="dropdown-item" href="#">近三月</a></li>
|
||
</ul>
|
||
</div>
|
||
</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>2024-02-15</td>
|
||
<td>数据授权</td>
|
||
<td class="text-success">+¥2,500</td>
|
||
<td><span class="badge bg-success">已结算</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2024-02-14</td>
|
||
<td>模型训练</td>
|
||
<td class="text-success">+¥1,800</td>
|
||
<td><span class="badge bg-success">已结算</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2024-02-13</td>
|
||
<td>查询服务</td>
|
||
<td class="text-success">+¥900</td>
|
||
<td><span class="badge bg-warning">待结算</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据使用情况 -->
|
||
<div class="row g-4 mb-4">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">数据使用情况</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="small-stats-card mb-4">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<div class="stat-label">今日调用量</div>
|
||
<div class="stat-value">128次</div>
|
||
</div>
|
||
<div class="progress" style="height: 4px;">
|
||
<div class="progress-bar bg-success" style="width: 85%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="small-stats-card mb-4">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<div class="stat-label">本月累计调用</div>
|
||
<div class="stat-value">1,280次</div>
|
||
</div>
|
||
<div class="progress" style="height: 4px;">
|
||
<div class="progress-bar bg-primary" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="small-stats-card">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<div class="stat-label">平均响应时间</div>
|
||
<div class="stat-value">238ms</div>
|
||
</div>
|
||
<div class="progress" style="height: 4px;">
|
||
<div class="progress-bar bg-info" style="width: 90%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-8">
|
||
<div class="card h-100 border-0">
|
||
<div class="card-header bg-transparent border-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h6 class="mb-0">调用趋势</h6>
|
||
<div class="btn-group btn-group-sm">
|
||
<button class="btn btn-outline-secondary active">今日</button>
|
||
<button class="btn btn-outline-secondary">本周</button>
|
||
<button class="btn btn-outline-secondary">本月</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div style="height: 250px;">
|
||
<canvas id="usageChart" height="200"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-4">
|
||
<div class="col-12">
|
||
<h6>使用方分布</h6>
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>使用方</th>
|
||
<th>数据资源</th>
|
||
<th>调用次数</th>
|
||
<th>数据量</th>
|
||
<th>最近调用</th>
|
||
<th>响应时间</th>
|
||
<th>授权状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>某银行</td>
|
||
<td>企业信用数据</td>
|
||
<td>1,280次</td>
|
||
<td>500GB</td>
|
||
<td>2024-02-15 15:30</td>
|
||
<td>245ms</td>
|
||
<td><span class="badge bg-success">已授权</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">详情</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>某医院</td>
|
||
<td>医疗影像数据</td>
|
||
<td>860次</td>
|
||
<td>2.1TB</td>
|
||
<td>2024-02-15 15:28</td>
|
||
<td>312ms</td>
|
||
<td><span class="badge bg-success">已授权</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">详情</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>某科技公司</td>
|
||
<td>企业信用数据</td>
|
||
<td>520次</td>
|
||
<td>180GB</td>
|
||
<td>2024-02-15 15:25</td>
|
||
<td>198ms</td>
|
||
<td><span class="badge bg-warning">待续期</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">详情</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收益规则说明 -->
|
||
<div class="row mt-4">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">收益规则说明</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h6>结算规则</h6>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><i class="bi bi-clock text-primary me-2"></i>收益实时计算，每月15日统一结算</li>
|
||
<li class="mb-2"><i class="bi bi-currency-exchange text-success me-2"></i>最低提现金额：100元</li>
|
||
<li class="mb-2"><i class="bi bi-shield-check text-info me-2"></i>区块链技术保证收益分配透明可信</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h6>分成比例</h6>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>数据授权：数据方80% / 平台方20%</li>
|
||
<li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>模型训练：数据方70% / 平台方30%</li>
|
||
<li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>查询服务：数据方75% / 平台方25%</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 安全风控合规日志 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<h5 class="card-title mb-0">安全风控合规日志</h5>
|
||
<div class="btn-group">
|
||
<button class="btn btn-outline-secondary btn-sm">导出日志</button>
|
||
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
|
||
筛选
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>操作类型</th>
|
||
<th>操作人</th>
|
||
<th>数据资源</th>
|
||
<th>访问IP</th>
|
||
<th>风险等级</th>
|
||
<th>合规状态</th>
|
||
<th>详情</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>2024-02-15 14:30:25</td>
|
||
<td>数据授权</td>
|
||
<td>张三</td>
|
||
<td>企业信用数据</td>
|
||
<td>192.168.1.100</td>
|
||
<td><span class="badge bg-success">低风险</span></td>
|
||
<td><span class="badge bg-success">合规</span></td>
|
||
<td><button class="btn btn-sm btn-outline-primary">查看</button></td>
|
||
</tr>
|
||
<!-- 更多日志记录 -->
|
||
</tbody>
|
||
</table>
|
||
</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>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script>
|
||
// 数据使用趋势图表
|
||
const ctx = document.getElementById('usageChart').getContext('2d');
|
||
new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
|
||
datasets: [{
|
||
label: '调用次数',
|
||
data: [65, 85, 120, 180, 156, 128, 0, 0],
|
||
borderColor: 'rgb(75, 192, 192)',
|
||
tension: 0.1,
|
||
fill: true,
|
||
backgroundColor: 'rgba(75, 192, 192, 0.1)'
|
||
},
|
||
{
|
||
label: '响应时间(ms)',
|
||
data: [220, 245, 268, 312, 289, 238, 0, 0],
|
||
borderColor: 'rgb(255, 99, 132)',
|
||
tension: 0.1,
|
||
fill: true,
|
||
backgroundColor: 'rgba(255, 99, 132, 0.1)',
|
||
yAxisID: 'y1'
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
position: 'top',
|
||
align: 'end'
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
title: {
|
||
display: true,
|
||
text: '调用次数'
|
||
},
|
||
ticks: {
|
||
maxTicksLimit: 5
|
||
},
|
||
grid: {
|
||
color: 'rgba(0,0,0,0.05)'
|
||
}
|
||
},
|
||
y1: {
|
||
beginAtZero: true,
|
||
position: 'right',
|
||
title: {
|
||
display: true,
|
||
text: '响应时间(ms)'
|
||
},
|
||
ticks: {
|
||
maxTicksLimit: 5
|
||
},
|
||
grid: {
|
||
drawOnChartArea: false
|
||
}
|
||
},
|
||
x: {
|
||
grid: {
|
||
color: 'rgba(0,0,0,0.05)'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |