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>
|