344 lines
16 KiB
HTML
344 lines
16 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="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> |