1002 lines
66 KiB
HTML
1002 lines
66 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="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">系统配置</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 配置面板 -->
|
||
<div class="row">
|
||
<!-- 左侧导航 -->
|
||
<div class="col-md-3">
|
||
<div class="list-group">
|
||
<a href="#data-access-config" class="list-group-item list-group-item-action active" data-bs-toggle="list">
|
||
<i class="bi bi-database-add me-2"></i>数据接入配置
|
||
</a>
|
||
<a href="#data-classify-config" class="list-group-item list-group-item-action" data-bs-toggle="list">
|
||
<i class="bi bi-tags me-2"></i>数据分类分级
|
||
</a>
|
||
<a href="#quality-control-config" class="list-group-item list-group-item-action" data-bs-toggle="list">
|
||
<i class="bi bi-check-circle me-2"></i>数据质量控制
|
||
</a>
|
||
<a href="#permission-config" class="list-group-item list-group-item-action" data-bs-toggle="list">
|
||
<i class="bi bi-shield-lock me-2"></i>使用权限配置
|
||
</a>
|
||
<a href="#flow-config" class="list-group-item list-group-item-action" data-bs-toggle="list">
|
||
<i class="bi bi-diagram-3 me-2"></i>数据流转配置
|
||
</a>
|
||
<a href="#api-config" class="list-group-item list-group-item-action" data-bs-toggle="list">
|
||
<i class="bi bi-code-square me-2"></i>技术接口配置
|
||
</a>
|
||
<a href="#security-config" class="list-group-item list-group-item-action" data-bs-toggle="list">
|
||
<i class="bi bi-shield-check me-2"></i>安全防护配置
|
||
</a>
|
||
<a href="#monitor-config" class="list-group-item list-group-item-action" data-bs-toggle="list">
|
||
<i class="bi bi-graph-up me-2"></i>监控告警配置
|
||
</a>
|
||
<a href="#billing-config" class="list-group-item list-group-item-action" data-bs-toggle="list">
|
||
<i class="bi bi-currency-exchange me-2"></i>计费结算配置
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧配置内容 -->
|
||
<div class="col-md-9">
|
||
<div class="tab-content">
|
||
<!-- 数据接入配置 -->
|
||
<div class="tab-pane fade show active" id="data-access-config">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">数据接入配置</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 数据源标识与认证 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">数据源标识与认证</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label">数据提供方标识</label>
|
||
<input type="text" class="form-control" placeholder="如：ORG_001">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label">接入凭证有效期</label>
|
||
<input type="date" class="form-control">
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label">授权范围</label>
|
||
<select class="form-select" multiple>
|
||
<option>数据读取</option>
|
||
<option>数据写入</option>
|
||
<option>元数据访问</option>
|
||
<option>管理权限</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据传输协议配置 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">数据传输协议配置</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label">传输协议类型</label>
|
||
<select class="form-select">
|
||
<option>HTTPS</option>
|
||
<option>SFTP</option>
|
||
<option>专线传输</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label">加密算法</label>
|
||
<select class="form-select">
|
||
<option>AES-256</option>
|
||
<option>SM4</option>
|
||
<option>自定义</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label">传输频率</label>
|
||
<select class="form-select">
|
||
<option>实时</option>
|
||
<option>每小时</option>
|
||
<option>每日</option>
|
||
<option>自定义</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label">重试策略</label>
|
||
<div class="input-group">
|
||
<input type="number" class="form-control" value="3">
|
||
<span class="input-group-text">次</span>
|
||
<input type="number" class="form-control" value="5">
|
||
<span class="input-group-text">分钟间隔</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据源连接管理 -->
|
||
<div class="mb-4">
|
||
<div class="d-flex justify-content-between align-items-center border-bottom pb-2">
|
||
<h6 class="mb-0">数据源连接管理</h6>
|
||
<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addConnectionModal">
|
||
<i class="bi bi-plus"></i> 添加数据源
|
||
</button>
|
||
</div>
|
||
<div class="table-responsive mt-3">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>数据源名称</th>
|
||
<th>类型</th>
|
||
<th>连接地址</th>
|
||
<th>同步状态</th>
|
||
<th>最后同步</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>企业数据库</td>
|
||
<td><span class="badge bg-primary">MySQL</span></td>
|
||
<td>jdbc:mysql://localhost:3306/enterprise</td>
|
||
<td><span class="badge bg-success">正常</span></td>
|
||
<td>2024-02-15 15:30</td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-secondary me-1">同步</button>
|
||
<button class="btn btn-sm btn-outline-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 连接配置 -->
|
||
<div class="tab-pane fade" id="connection-config">
|
||
<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" data-bs-toggle="modal" data-bs-target="#addConnectionModal">
|
||
<i class="bi bi-plus"></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>MySQL主库</td>
|
||
<td><span class="badge bg-primary">MySQL</span></td>
|
||
<td>jdbc:mysql://localhost:3306/main</td>
|
||
<td><span class="badge bg-success">已连接</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Oracle生产库</td>
|
||
<td><span class="badge bg-warning">Oracle</span></td>
|
||
<td>jdbc:oracle:thin:@localhost:1521:PROD</td>
|
||
<td><span class="badge bg-danger">未连接</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 安全配置 -->
|
||
<div class="tab-pane fade" id="security-config">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">安全配置</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<form>
|
||
<div class="mb-4">
|
||
<h6>加密配置</h6>
|
||
<div class="mb-3">
|
||
<label class="form-label">加密算法</label>
|
||
<select class="form-select">
|
||
<option>AES-256</option>
|
||
<option>SM4</option>
|
||
<option>RSA</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">密钥管理</label>
|
||
<div class="input-group">
|
||
<input type="password" class="form-control" value="********">
|
||
<button class="btn btn-outline-secondary">重置密钥</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<h6>访问控制</h6>
|
||
<div class="form-check form-switch mb-2">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">启用IP白名单</label>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">IP白名单</label>
|
||
<textarea class="form-control" rows="3">192.168.1.0/24 10.0.0.0/8</textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<h6>审计日志</h6>
|
||
<div class="form-check form-switch mb-2">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">启用操作审计</label>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">日志保存天数</label>
|
||
<input type="number" class="form-control" value="180">
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 节点配置 -->
|
||
<div class="tab-pane fade" id="node-config">
|
||
<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">
|
||
<i class="bi bi-plus"></i> 添加节点
|
||
</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>节点名称</th>
|
||
<th>节点类型</th>
|
||
<th>IP地址</th>
|
||
<th>端口</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>主节点</td>
|
||
<td><span class="badge bg-primary">Master</span></td>
|
||
<td>192.168.1.100</td>
|
||
<td>8080</td>
|
||
<td><span class="badge bg-success">运行中</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">停止</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>计算节点01</td>
|
||
<td><span class="badge bg-info">Worker</span></td>
|
||
<td>192.168.1.101</td>
|
||
<td>8080</td>
|
||
<td><span class="badge bg-success">运行中</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">停止</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据分类分级配置 -->
|
||
<div class="tab-pane fade" id="data-classify-config">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">数据分类分级配置</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 数据分类标准 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">数据分类标准</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-12">
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>分类编码</th>
|
||
<th>分类名称</th>
|
||
<th>上级分类</th>
|
||
<th>描述</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>A001</td>
|
||
<td>企业基础信息</td>
|
||
<td>-</td>
|
||
<td>包含企业工商、税务等基础信息</td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>A001001</td>
|
||
<td>工商信息</td>
|
||
<td>企业基础信息</td>
|
||
<td>企业工商登记相关信息</td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">删除</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm mt-2">
|
||
<i class="bi bi-plus"></i> 添加分类
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据分级规则 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">数据分级规则</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-12">
|
||
<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><span class="badge bg-danger">S1</span></td>
|
||
<td>核心敏感</td>
|
||
<td>
|
||
<ul class="list-unstyled mb-0">
|
||
<li><i class="bi bi-check-circle-fill text-success"></i> 专人专岗</li>
|
||
<li><i class="bi bi-check-circle-fill text-success"></i> 双因素认证</li>
|
||
</ul>
|
||
</td>
|
||
<td>
|
||
<ul class="list-unstyled mb-0">
|
||
<li><i class="bi bi-shield-fill-check text-primary"></i> 加密存储</li>
|
||
<li><i class="bi bi-shield-fill-check text-primary"></i> 全程审计</li>
|
||
</ul>
|
||
</td>
|
||
<td>禁止出境，限定场景使用</td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="badge bg-warning">S2</span></td>
|
||
<td>重要敏感</td>
|
||
<td>
|
||
<ul class="list-unstyled mb-0">
|
||
<li><i class="bi bi-check-circle-fill text-success"></i> 授权访问</li>
|
||
<li><i class="bi bi-check-circle-fill text-success"></i> 身份认证</li>
|
||
</ul>
|
||
</td>
|
||
<td>
|
||
<ul class="list-unstyled mb-0">
|
||
<li><i class="bi bi-shield-fill-check text-primary"></i> 加密传输</li>
|
||
<li><i class="bi bi-shield-fill-check text-primary"></i> 访问记录</li>
|
||
</ul>
|
||
</td>
|
||
<td>限定范围流通</td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">编辑</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分类分级映射 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">分类分级映射</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-12">
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>数据分类</th>
|
||
<th>默认分级</th>
|
||
<th>字段示例</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>企业基础信息</td>
|
||
<td><span class="badge bg-warning">S2</span></td>
|
||
<td>统一社会信用代码、注册资本</td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>个人身份信息</td>
|
||
<td><span class="badge bg-danger">S1</span></td>
|
||
<td>身份证号、银行账号</td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">编辑</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm mt-2">
|
||
<i class="bi bi-plus"></i> 添加映射
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自动分级规则 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">自动分级规则</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-12">
|
||
<div class="alert alert-info">
|
||
<i class="bi bi-info-circle me-2"></i>
|
||
系统将根据以下规则自动判断数据的敏感级别
|
||
</div>
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>规则名称</th>
|
||
<th>触发条件</th>
|
||
<th>目标级别</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>个人敏感信息识别</td>
|
||
<td>包含身份证、手机号等字段</td>
|
||
<td><span class="badge bg-danger">S1</span></td>
|
||
<td><span class="badge bg-success">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">编辑</button>
|
||
<button class="btn btn-sm btn-outline-secondary">停用</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm mt-2">
|
||
<i class="bi bi-plus"></i> 添加规则
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据质量控制配置 -->
|
||
<div class="tab-pane fade" id="quality-control-config">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">数据质量控制配置</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 数据校验规则 -->
|
||
<div class="mb-4">
|
||
<div class="d-flex justify-content-between align-items-center border-bottom pb-2">
|
||
<h6 class="mb-0">数据校验规则</h6>
|
||
<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addValidationRuleModal">
|
||
<i class="bi bi-plus"></i> 添加规则
|
||
</button>
|
||
</div>
|
||
<div class="table-responsive mt-3">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>规则名称</th>
|
||
<th>数据类型</th>
|
||
<th>校验类型</th>
|
||
<th>校验规则</th>
|
||
<th>处理策略</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>手机号格式校验</td>
|
||
<td>手机号</td>
|
||
<td>正则表达式</td>
|
||
<td><code>^1[3-9]\d{9}$</code></td>
|
||
<td>拒绝写入</td>
|
||
<td><span class="badge bg-success">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">停用</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>年龄范围校验</td>
|
||
<td>年龄</td>
|
||
<td>数值范围</td>
|
||
<td>0 - 150</td>
|
||
<td>标记异常</td>
|
||
<td><span class="badge bg-success">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">停用</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 质量监控指标 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">质量监控指标</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<h6 class="card-title">数据准确性</h6>
|
||
<div class="mb-3">
|
||
<label class="form-label">准确率阈值</label>
|
||
<div class="input-group">
|
||
<input type="number" class="form-control" value="95">
|
||
<span class="input-group-text">%</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">启用告警</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<h6 class="card-title">数据完整性</h6>
|
||
<div class="mb-3">
|
||
<label class="form-label">完整率阈值</label>
|
||
<div class="input-group">
|
||
<input type="number" class="form-control" value="98">
|
||
<span class="input-group-text">%</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">启用告警</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<h6 class="card-title">数据时效性</h6>
|
||
<div class="mb-3">
|
||
<label class="form-label">最大延迟时间</label>
|
||
<div class="input-group">
|
||
<input type="number" class="form-control" value="30">
|
||
<span class="input-group-text">分钟</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">启用告警</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<h6 class="card-title">数据一致性</h6>
|
||
<div class="mb-3">
|
||
<label class="form-label">一致性检查周期</label>
|
||
<select class="form-select">
|
||
<option>每小时</option>
|
||
<option>每天</option>
|
||
<option>每周</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">启用告警</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 质量评估报告 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">质量评估报告</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-12">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between mb-3">
|
||
<div>
|
||
<h6 class="mb-0">报告生成设置</h6>
|
||
</div>
|
||
<div>
|
||
<button class="btn btn-outline-primary btn-sm">生成报告</button>
|
||
</div>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<label class="form-label">报告周期</label>
|
||
<select class="form-select">
|
||
<option>每日报告</option>
|
||
<option>每周报告</option>
|
||
<option>每月报告</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label class="form-label">接收邮箱</label>
|
||
<input type="email" class="form-control" placeholder="输入邮箱地址">
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label class="form-label">报告格式</label>
|
||
<select class="form-select">
|
||
<option>PDF</option>
|
||
<option>Excel</option>
|
||
<option>Word</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用权限配置 -->
|
||
<div class="tab-pane fade" id="permission-config">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="card-title mb-0">使用权限配置</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 角色权限管理 -->
|
||
<div class="mb-4">
|
||
<div class="d-flex justify-content-between align-items-center border-bottom pb-2">
|
||
<h6 class="mb-0">角色权限管理</h6>
|
||
<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addRoleModal">
|
||
<i class="bi bi-plus"></i> 添加角色
|
||
</button>
|
||
</div>
|
||
<div class="table-responsive mt-3">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>角色名称</th>
|
||
<th>数据访问权限</th>
|
||
<th>功能权限</th>
|
||
<th>用户数量</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>数据管理员</td>
|
||
<td>
|
||
<span class="badge bg-primary me-1">读取</span>
|
||
<span class="badge bg-success me-1">写入</span>
|
||
<span class="badge bg-info">管理</span>
|
||
</td>
|
||
<td>
|
||
<ul class="list-unstyled mb-0">
|
||
<li><i class="bi bi-check-circle-fill text-success"></i> 数据接入管理</li>
|
||
<li><i class="bi bi-check-circle-fill text-success"></i> 质量控制</li>
|
||
</ul>
|
||
</td>
|
||
<td>5</td>
|
||
<td><span class="badge bg-success">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">停用</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>数据分析师</td>
|
||
<td>
|
||
<span class="badge bg-primary me-1">读取</span>
|
||
</td>
|
||
<td>
|
||
<ul class="list-unstyled mb-0">
|
||
<li><i class="bi bi-check-circle-fill text-success"></i> 数据查询</li>
|
||
<li><i class="bi bi-check-circle-fill text-success"></i> 数据分析</li>
|
||
</ul>
|
||
</td>
|
||
<td>12</td>
|
||
<td><span class="badge bg-success">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">停用</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据访问控制 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">数据访问控制</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-12">
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>数据资源</th>
|
||
<th>访问角色</th>
|
||
<th>访问类型</th>
|
||
<th>时间限制</th>
|
||
<th>IP限制</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>企业信用数据</td>
|
||
<td>数据分析师</td>
|
||
<td>
|
||
<span class="badge bg-primary">只读</span>
|
||
</td>
|
||
<td>工作日 9:00-18:00</td>
|
||
<td>192.168.1.0/24</td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary">编辑</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm mt-2">
|
||
<i class="bi bi-plus"></i> 添加访问规则
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据脱敏规则 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">数据脱敏规则</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-12">
|
||
<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>手机号脱敏</td>
|
||
<td>手机号码</td>
|
||
<td>中间4位替换为*</td>
|
||
<td>数据分析师</td>
|
||
<td><span class="badge bg-success">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-outline-primary me-1">编辑</button>
|
||
<button class="btn btn-sm btn-outline-danger">停用</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm mt-2">
|
||
<i class="bi bi-plus"></i> 添加脱敏规则
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 审计日志配置 -->
|
||
<div class="mb-4">
|
||
<h6 class="border-bottom pb-2">审计日志配置</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<h6 class="card-title">日志记录设置</h6>
|
||
<div class="mb-3">
|
||
<div class="form-check form-switch mb-2">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">记录数据访问</label>
|
||
</div>
|
||
<div class="form-check form-switch mb-2">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">记录数据修改</label>
|
||
</div>
|
||
<div class="form-check form-switch mb-2">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">记录权限变更</label>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">日志保存期限</label>
|
||
<select class="form-select">
|
||
<option>180天</option>
|
||
<option>365天</option>
|
||
<option>永久</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<h6 class="card-title">告警设置</h6>
|
||
<div class="mb-3">
|
||
<label class="form-label">异常访问告警</label>
|
||
<div class="input-group mb-2">
|
||
<span class="input-group-text">访问频率超过</span>
|
||
<input type="number" class="form-control" value="100">
|
||
<span class="input-group-text">次/分钟</span>
|
||
</div>
|
||
<div class="input-group">
|
||
<span class="input-group-text">非常规时间访问</span>
|
||
<input type="text" class="form-control" value="23:00-06:00">
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">告警通知方式</label>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">邮件通知</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" checked>
|
||
<label class="form-check-label">短信通知</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加连接模态框 -->
|
||
<div class="modal fade" id="addConnectionModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<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">
|
||
<form>
|
||
<div class="mb-3">
|
||
<label class="form-label">数据源名称</label>
|
||
<input type="text" class="form-control">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">数据源类型</label>
|
||
<select class="form-select">
|
||
<option>MySQL</option>
|
||
<option>Oracle</option>
|
||
<option>PostgreSQL</option>
|
||
<option>SQL Server</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">连接地址</label>
|
||
<input type="text" class="form-control">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">用户名</label>
|
||
<input type="text" class="form-control">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">密码</label>
|
||
<input type="password" class="form-control">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-primary">测试连接</button>
|
||
<button type="button" class="btn btn-success">保存</button>
|
||
</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>
|
||
</body>
|
||
</html> |