262 lines
14 KiB
HTML
262 lines
14 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="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h2 class="mb-1">数据运营场景</h2>
|
||
<p class="text-muted mb-0">管理和监控您的数据应用场景</p>
|
||
</div>
|
||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newScenarioModal">
|
||
<i class="bi bi-plus-lg me-2"></i>新建场景
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 筛选和搜索栏 -->
|
||
<div class="card mb-4">
|
||
<div class="card-body">
|
||
<div class="row g-3">
|
||
<div class="col-md-3">
|
||
<select class="form-select">
|
||
<option value="">所有行业</option>
|
||
<option>医疗健康</option>
|
||
<option>金融科技</option>
|
||
<option>工业制造</option>
|
||
<option>供应链</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<select class="form-select">
|
||
<option value="">所有状态</option>
|
||
<option>运行中</option>
|
||
<option>已暂停</option>
|
||
<option>配置中</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" placeholder="搜索场景名称">
|
||
<button class="btn btn-outline-secondary">
|
||
<i class="bi bi-search"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景卡片列表 -->
|
||
<div class="row g-4">
|
||
<!-- 运行中的场景 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card h-100 shadow-sm">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between mb-3">
|
||
<span class="badge bg-success">运行中</span>
|
||
<div class="dropdown">
|
||
<button class="btn btn-link text-muted p-0" data-bs-toggle="dropdown">
|
||
<i class="bi bi-three-dots-vertical"></i>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="dropdown-item" href="scenario-medical.html" target="_blank"><i class="bi bi-eye me-2"></i>查看</a></li>
|
||
<li><a class="dropdown-item" href="#"><i class="bi bi-pause me-2"></i>暂停</a></li>
|
||
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>配置</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash me-2"></i>删除</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<h5 class="card-title">
|
||
<a href="scenario-medical.html" class="text-decoration-none text-dark" target="_blank">
|
||
医疗数据分析平台
|
||
<i class="bi bi-box-arrow-up-right text-muted ms-1 small"></i>
|
||
</a>
|
||
</h5>
|
||
<p class="text-muted small mb-3">基于患者治疗数据的疾病研究分析平台</p>
|
||
<div class="mb-3">
|
||
<div class="d-flex justify-content-between text-muted small mb-2">
|
||
<span>数据处理量</span>
|
||
<span>2.5TB</span>
|
||
</div>
|
||
<div class="progress" style="height: 6px;">
|
||
<div class="progress-bar" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-center text-muted small">
|
||
<i class="bi bi-clock me-1"></i>
|
||
<span>最近更新：2024-01-20</span>
|
||
</div>
|
||
<!-- 快捷操作按钮 -->
|
||
<div class="mt-3 pt-3 border-top">
|
||
<a href="scenario-medical.html" class="btn btn-sm btn-outline-primary w-100" target="_blank">
|
||
<i class="bi bi-graph-up me-1"></i>查看详情
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 配置中的场景 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card h-100 shadow-sm">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between mb-3">
|
||
<span class="badge bg-warning text-dark">配置中</span>
|
||
<div class="dropdown">
|
||
<button class="btn btn-link text-muted p-0" data-bs-toggle="dropdown">
|
||
<i class="bi bi-three-dots-vertical"></i>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="dropdown-item" href="#"><i class="bi bi-eye me-2"></i>查看</a></li>
|
||
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>配置</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash me-2"></i>删除</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<h5 class="card-title">金融风控模型</h5>
|
||
<p class="text-muted small mb-3">基于用户信用数据的风险评估模型</p>
|
||
<div class="mb-3">
|
||
<div class="d-flex justify-content-between text-muted small mb-2">
|
||
<span>配置进度</span>
|
||
<span>60%</span>
|
||
</div>
|
||
<div class="progress" style="height: 6px;">
|
||
<div class="progress-bar bg-warning" style="width: 60%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-center text-muted small">
|
||
<i class="bi bi-clock me-1"></i>
|
||
<span>创建时间：2024-01-15</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新建场景模态框 -->
|
||
<div class="modal fade" id="newScenarioModal" tabindex="-1">
|
||
<div class="modal-dialog modal-xl">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">新建数据运营场景</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<!-- 主要场景模板 -->
|
||
<h6 class="mb-3">推荐模板</h6>
|
||
<div class="row g-4">
|
||
<!-- 场景模板选项 -->
|
||
<div class="col-md-4">
|
||
<div class="card h-100 border-primary">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-heart-pulse display-4 text-primary mb-3"></i>
|
||
<h5>医疗数据分析</h5>
|
||
<div class="text-muted small mb-3">
|
||
<p class="mb-2">适用场景：疾病研究、药物研发</p>
|
||
<p class="mb-2">数据类型：治疗数据、基因数据</p>
|
||
<p class="mb-0">特色功能：隐私计算、数据脱敏</p>
|
||
</div>
|
||
<button class="btn btn-outline-primary btn-sm">选择模板</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-bank display-4 text-muted mb-3"></i>
|
||
<h5>金融风控分析</h5>
|
||
<div class="text-muted small mb-3">
|
||
<p class="mb-2">适用场景：风险评估、信贷推荐</p>
|
||
<p class="mb-2">数据类型：信用数据、交易数据</p>
|
||
<p class="mb-0">特色功能：同态加密、分类分级</p>
|
||
</div>
|
||
<button class="btn btn-outline-secondary btn-sm">选择模板</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-gear-wide display-4 text-muted mb-3"></i>
|
||
<h5>工业数据分析</h5>
|
||
<div class="text-muted small mb-3">
|
||
<p class="mb-2">适用场景：设备优化、故障预测</p>
|
||
<p class="mb-2">数据类型：设备运行数据、传感器数据</p>
|
||
<p class="mb-0">特色功能：实时分析、预测预警</p>
|
||
</div>
|
||
<button class="btn btn-outline-secondary btn-sm">选择模板</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 更多场景模板 -->
|
||
<h6 class="mt-4 mb-3">更多模板</h6>
|
||
<div class="row g-4">
|
||
<div class="col-md-3">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-truck display-4 text-muted mb-2"></i>
|
||
<h6>物流数据分析</h6>
|
||
<p class="text-muted small mb-3">货物数据共享协作</p>
|
||
<button class="btn btn-outline-secondary btn-sm">选择</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-buildings display-4 text-muted mb-2"></i>
|
||
<h6>智慧城市分析</h6>
|
||
<p class="text-muted small mb-3">城市数据融合分析</p>
|
||
<button class="btn btn-outline-secondary btn-sm">选择</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-cpu display-4 text-muted mb-2"></i>
|
||
<h6>AI模型训练</h6>
|
||
<p class="text-muted small mb-3">数据集训练优化</p>
|
||
<button class="btn btn-outline-secondary btn-sm">选择</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-plus-lg display-4 text-muted mb-2"></i>
|
||
<h6>自定义模板</h6>
|
||
<p class="text-muted small mb-3">创建空白模板</p>
|
||
<button class="btn btn-outline-secondary btn-sm">创建</button>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</body>
|
||
</html> |