更新记录
1. 修改了数据运营服务页面 2. 新增了数据钱包页面（整体的和企业的，两个版本） 3. 新增了接口化配置可信数据空间的页面设计
This commit is contained in:
sichan
parent
cb829504cb
commit
71a472969a
@ -31,12 +31,22 @@
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<strong class="me-2">数据分级:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-danger me-2">一级敏感</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-warning me-2">二级敏感</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-info me-2">三级敏感</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-success">普通</a>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<strong class="me-2">行业分类:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">金融</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">医疗</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">制造</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">零售</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">教育</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">交通</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">能源</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">更多</a>
|
||||
</div>
|
||||
<div>
|
||||
@ -46,6 +56,13 @@
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">实时数据流</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">API接口</a>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<strong class="me-2">更新频率:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">实时</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">每日</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">每周</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">每月</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -128,6 +145,67 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增数据产品卡片 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="badge bg-danger">一级敏感</span>
|
||||
<span class="badge bg-info">医疗数据</span>
|
||||
</div>
|
||||
<h5 class="card-title">医疗影像诊断数据集</h5>
|
||||
<p class="card-text text-muted">包含50万+标注医疗影像数据，适用于AI模型训练</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted me-3">
|
||||
<i class="bi bi-clock"></i> 每日更新
|
||||
</small>
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-database"></i> 15TB
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥8000/月</span>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="badge bg-warning">二级敏感</span>
|
||||
<span class="badge bg-primary">交通数据</span>
|
||||
</div>
|
||||
<h5 class="card-title">城市交通流量实时数据</h5>
|
||||
<p class="card-text text-muted">覆盖主要城市路段的实时交通流量、拥堵指数等数据</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted me-3">
|
||||
<i class="bi bi-clock"></i> 实时更新
|
||||
</small>
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-database"></i> 500GB/天
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥6000/月</span>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多数据产品卡片 -->
|
||||
<!-- ... -->
|
||||
</div>
|
||||
|
||||
508
pages/data-wallet.html
Normal file
508
pages/data-wallet.html
Normal file
@ -0,0 +1,508 @@
|
||||
<!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>
|
||||
344
pages/enterprise-wallet.html
Normal file
344
pages/enterprise-wallet.html
Normal file
@ -0,0 +1,344 @@
|
||||
<!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="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<img src="../assets/images/company-logo.png" alt="企业logo" class="rounded" style="width: 80px;">
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="mb-1">某机械制造有限公司</h4>
|
||||
<p class="text-muted mb-0">
|
||||
<span class="me-3"><i class="bi bi-building me-1"></i>制造业</span>
|
||||
<span class="me-3"><i class="bi bi-geo-alt me-1"></i>浙江省杭州市</span>
|
||||
<span><i class="bi bi-calendar-check me-1"></i>2023年12月加入</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="badge bg-success">已认证企业</span>
|
||||
</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">¥ 528,600</h3>
|
||||
<small>较上月 <i class="bi bi-arrow-up-right"></i> 15.2%</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">¥ 42,300</h3>
|
||||
<small>较上月 <i class="bi bi-arrow-up-right"></i> 8.5%</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">12个</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">895</h3>
|
||||
<small>信用等级 AA</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据资产与场景 -->
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- 数据资产目录 -->
|
||||
<div class="col-md-7">
|
||||
<div class="card h-100">
|
||||
<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">
|
||||
<i class="bi bi-plus-lg"></i> 添加数据
|
||||
</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-database me-2 text-primary"></i>
|
||||
生产设备运行数据
|
||||
</div>
|
||||
</td>
|
||||
<td>85GB</td>
|
||||
<td>实时</td>
|
||||
<td>
|
||||
<span class="badge bg-primary me-1">设备预测性维护</span>
|
||||
<span class="badge bg-success">能耗优化</span>
|
||||
</td>
|
||||
<td class="text-success">¥15,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-graph-up me-2 text-success"></i>
|
||||
供应链交易数据
|
||||
</div>
|
||||
</td>
|
||||
<td>120GB</td>
|
||||
<td>每日</td>
|
||||
<td>
|
||||
<span class="badge bg-primary me-1">供应链金融</span>
|
||||
<span class="badge bg-info">库存优化</span>
|
||||
</td>
|
||||
<td class="text-success">¥12,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-cart me-2 text-info"></i>
|
||||
电商交易数据
|
||||
</div>
|
||||
</td>
|
||||
<td>45GB</td>
|
||||
<td>实时</td>
|
||||
<td>
|
||||
<span class="badge bg-primary me-1">信用评估</span>
|
||||
<span class="badge bg-warning">营销分析</span>
|
||||
</td>
|
||||
<td class="text-success">¥8,600</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 场景应用分析 -->
|
||||
<div class="col-md-5">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">场景应用分析</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div style="position: relative; height: 200px; width: 100%;">
|
||||
<canvas id="scenarioChart"></canvas>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<h6>热门应用场景</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<span class="badge bg-primary">设备预测性维护 (32%)</span>
|
||||
<span class="badge bg-success">供应链金融 (28%)</span>
|
||||
<span class="badge bg-info">能耗优化 (20%)</span>
|
||||
<span class="badge bg-warning">库存优化 (15%)</span>
|
||||
<span class="badge bg-secondary">其他 (5%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收益分配明细 -->
|
||||
<div class="card mb-4">
|
||||
<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="card border">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">收益分配规则</h6>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>设备预测性维护</td>
|
||||
<td class="text-end">80%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>供应链金融</td>
|
||||
<td class="text-end">75%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>能耗优化</td>
|
||||
<td class="text-end">70%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
百分比为数据提供方分成比例
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>结算时间</th>
|
||||
<th>应用场景</th>
|
||||
<th>数据规模</th>
|
||||
<th>分成比例</th>
|
||||
<th>结算金额</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2024-02-15</td>
|
||||
<td>设备预测性维护</td>
|
||||
<td>25GB</td>
|
||||
<td>80%</td>
|
||||
<td class="text-success">+¥15,800</td>
|
||||
<td><span class="badge bg-success">已结算</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2024-02-14</td>
|
||||
<td>供应链金融</td>
|
||||
<td>18GB</td>
|
||||
<td>75%</td>
|
||||
<td class="text-success">+¥12,500</td>
|
||||
<td><span class="badge bg-warning">待结算</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据价值提升建议 -->
|
||||
<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="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="bi bi-lightning-charge text-warning fs-3"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6>提升数据质量</h6>
|
||||
<p class="text-muted mb-0">建议完善设备运行数据采集频率，提高数据准确性至98%以上</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="bi bi-graph-up-arrow text-success fs-3"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6>扩展应用场景</h6>
|
||||
<p class="text-muted mb-0">可考虑将设备数据应用于产业链协同，预计可提升30%收益</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="bi bi-shield-check text-primary fs-3"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6>提升数据信用</h6>
|
||||
<p class="text-muted mb-0">完善数据权属证明，有助于提高数据定价能力</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="../assets/js/components.js"></script>
|
||||
<script src="../assets/js/script.js"></script>
|
||||
<script>
|
||||
// 场景应用分析图表
|
||||
const ctx = document.getElementById('scenarioChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['设备预测性维护', '供应链金融', '能耗优化', '库存优化', '其他'],
|
||||
datasets: [{
|
||||
data: [32, 28, 20, 15, 5],
|
||||
backgroundColor: [
|
||||
'rgba(13, 110, 253, 0.8)',
|
||||
'rgba(25, 135, 84, 0.8)',
|
||||
'rgba(13, 202, 240, 0.8)',
|
||||
'rgba(255, 193, 7, 0.8)',
|
||||
'rgba(108, 117, 125, 0.8)'
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
layout: {
|
||||
padding: 20
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'right',
|
||||
align: 'center',
|
||||
labels: {
|
||||
boxWidth: 15,
|
||||
padding: 15
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1002
pages/system-config.html
Normal file
1002
pages/system-config.html
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user