257 lines
10 KiB
HTML
257 lines
10 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">
|
||
<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> |