You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3401 lines
208 KiB
3401 lines
208 KiB
<!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="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-color: #0d47a1;
|
|
--secondary-color: #1976d2;
|
|
--accent-color: #7c3aed;
|
|
--success-color: #10b981;
|
|
--warning-color: #f59e0b;
|
|
--danger-color: #ef4444;
|
|
}
|
|
|
|
body {
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
/* 参考综合分析研判平台:政务蓝侧栏 */
|
|
.app-sidebar {
|
|
background: #0d47a1;
|
|
border-right: 1px solid #0b3d8d;
|
|
width: 16rem;
|
|
transition: width 0.25s ease;
|
|
}
|
|
|
|
.app-sidebar-brand {
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid #0b3d8d;
|
|
}
|
|
|
|
.app-sidebar-footer {
|
|
padding: 0.85rem 1.25rem;
|
|
border-top: 1px solid #0b3d8d;
|
|
color: #93c5fd;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.sidebar-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 0.75rem 1.25rem;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-left: 4px solid transparent;
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.sidebar-label {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.sidebar-toggle-btn {
|
|
width: 26px;
|
|
height: 58px;
|
|
border-radius: 0 10px 10px 0;
|
|
border: 1px solid #d1d5db;
|
|
border-left: none;
|
|
color: #0f2a49;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
background: #ffffff;
|
|
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.sidebar-toggle-btn:hover {
|
|
background: #f3f4f6;
|
|
color: #0b1f36;
|
|
box-shadow: 2px 0 14px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.sidebar-edge-toggle {
|
|
position: fixed;
|
|
top: 50vh;
|
|
left: 16rem;
|
|
z-index: 1200;
|
|
transition: left 0.25s ease;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
body.sidebar-collapsed .app-sidebar {
|
|
width: 4.5rem;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar-edge-toggle {
|
|
left: 4.5rem;
|
|
}
|
|
|
|
body.sidebar-collapsed .app-sidebar-brand {
|
|
padding: 1rem 0.6rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
body.sidebar-collapsed .app-sidebar-brand span {
|
|
display: none;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar-nav-item {
|
|
padding: 0.75rem 0.65rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar-label {
|
|
opacity: 0;
|
|
width: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.sidebar-collapsed .app-sidebar-footer {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sidebar-nav-item:hover {
|
|
background: #1565c0;
|
|
color: #fff;
|
|
}
|
|
|
|
.sidebar-nav-item.active {
|
|
background: #1976d2;
|
|
border-left-color: #64b5f6;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.main-menu {
|
|
flex-shrink: 0;
|
|
z-index: 40;
|
|
background: white;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.menu-item {
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.menu-item.active {
|
|
background-color: #eff6ff;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.menu-item.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.data-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 12px;
|
|
padding: 0.9rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.data-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #1565c0;
|
|
border: 1px solid #0d47a1;
|
|
color: white;
|
|
padding: 0.4rem 0.9rem;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0d47a1;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.filter-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.875rem;
|
|
background-color: #e0e7ff;
|
|
color: var(--primary-color);
|
|
margin-right: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.filter-tag:hover {
|
|
background-color: #c7d2fe;
|
|
}
|
|
|
|
.table-row {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.table-row:hover {
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal.active {
|
|
display: flex;
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.breadcrumb-item:not(:last-child)::after {
|
|
content: '/';
|
|
margin: 0 0.5rem;
|
|
color: #d1d5db;
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
}
|
|
|
|
.search-box input {
|
|
padding-left: 2.5rem;
|
|
}
|
|
|
|
.search-box i {
|
|
position: absolute;
|
|
left: 0.75rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.quick-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 0.85rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.stat-label {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.workflow-step {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.step-number {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-right: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.step-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.step-title {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.step-description {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.data-preview {
|
|
background: #f8fafc;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.preview-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.action-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
background-color: #f3f4f6;
|
|
border-radius: 6px;
|
|
color: #374151;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.action-button:hover {
|
|
background-color: #e5e7eb;
|
|
}
|
|
|
|
.action-button i {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.list-panel {
|
|
min-height: 420px;
|
|
max-height: calc(100vh - 340px);
|
|
overflow: auto;
|
|
}
|
|
|
|
.list-panel-tight {
|
|
min-height: 400px;
|
|
max-height: calc(100vh - 380px);
|
|
overflow: auto;
|
|
}
|
|
|
|
.filter-compact label {
|
|
font-size: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.filter-compact input,
|
|
.filter-compact select {
|
|
font-size: 12px;
|
|
padding-top: 0.4rem;
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
|
|
.filter-compact .text-lg {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.filter-compact-btn {
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
padding: 0.42rem 0.8rem;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.op-btn {
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
padding: 0.3rem 0.5rem;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.table-compact {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.table-compact th {
|
|
font-size: 12px;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.tab-content h1 {
|
|
font-size: 1.7rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
/* 全页面字号基线统一(主页面 + 子区块) */
|
|
.tab-content {
|
|
font-size: 13px;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.tab-content h2,
|
|
.tab-content h3 {
|
|
font-size: 1rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.tab-content h4 {
|
|
font-size: 0.9rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.tab-content table {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.tab-content table th {
|
|
font-size: 12px;
|
|
color: #4b5563;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 弹窗统一字号层级 */
|
|
.modal h3.text-xl.font-semibold {
|
|
font-size: 1.08rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.modal .p-6,
|
|
.modal .p-4 {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.modal label,
|
|
.modal input,
|
|
.modal select,
|
|
.modal textarea,
|
|
.modal button,
|
|
.modal p,
|
|
.modal td,
|
|
.modal th {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.modal table th {
|
|
font-size: 12px;
|
|
color: #4b5563;
|
|
}
|
|
|
|
/* 页面按钮蓝色统一到侧栏政务蓝系 */
|
|
.bg-blue-600 {
|
|
background-color: #1976d2 !important;
|
|
}
|
|
|
|
.hover\:bg-blue-700:hover {
|
|
background-color: #1565c0 !important;
|
|
}
|
|
|
|
.text-blue-600 {
|
|
color: #1565c0 !important;
|
|
}
|
|
|
|
.bg-blue-50 {
|
|
background-color: #e3f2fd !important;
|
|
}
|
|
|
|
.border-blue-200 {
|
|
border-color: #bbdefb !important;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body class="font-sans flex h-screen overflow-hidden">
|
|
|
|
<!-- 左侧主导航 -->
|
|
<aside id="appSidebar" class="app-sidebar flex-shrink-0 flex flex-col text-white shadow-xl z-20">
|
|
<div class="sidebar-edge-toggle">
|
|
<button type="button" id="sidebarToggleBtn" class="sidebar-toggle-btn" onclick="toggleSidebar()" title="收起/展开菜单" aria-label="收起或展开左侧菜单">
|
|
<i id="sidebarToggleIcon" class="fas fa-angles-left text-sm"></i>
|
|
</button>
|
|
</div>
|
|
<div class="app-sidebar-brand flex items-center gap-2">
|
|
<i class="fas fa-shield-alt text-xl text-sky-300"></i>
|
|
<span class="text-base font-bold tracking-wide text-white">网上督查平台</span>
|
|
</div>
|
|
<nav class="flex-1 overflow-y-auto py-2">
|
|
<button type="button" class="sidebar-nav-item active" onclick="switchMainMenu('data-channel', this)">
|
|
<i class="fas fa-exchange-alt w-7 text-center flex-shrink-0"></i>
|
|
<span class="sidebar-label">数据通道</span>
|
|
</button>
|
|
<button type="button" class="sidebar-nav-item" onclick="switchMainMenu('data-convergence', this)">
|
|
<i class="fas fa-database w-7 text-center flex-shrink-0"></i>
|
|
<span class="sidebar-label">数据汇聚</span>
|
|
</button>
|
|
<button type="button" class="sidebar-nav-item" onclick="switchMainMenu('data-assets', this)">
|
|
<i class="fas fa-folder-open w-7 text-center flex-shrink-0"></i>
|
|
<span class="sidebar-label">数据资产</span>
|
|
</button>
|
|
<button type="button" class="sidebar-nav-item" onclick="switchMainMenu('specialized-apps', this)">
|
|
<i class="fas fa-chart-pie w-7 text-center flex-shrink-0"></i>
|
|
<span class="sidebar-label">专题应用</span>
|
|
</button>
|
|
</nav>
|
|
<div class="app-sidebar-footer">
|
|
<i class="fas fa-user mr-1"></i>演示账号 · 省厅督察总队
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 右侧主区域 -->
|
|
<div class="flex-1 flex flex-col min-w-0 overflow-hidden bg-[#f8fafc]">
|
|
<!-- 顶栏 -->
|
|
<header class="main-menu">
|
|
<div class="px-6 py-3 flex items-center justify-between">
|
|
<div>
|
|
<div class="text-xl font-bold" style="color:#0d47a1;">安徽省网上督查平台 · 数据应用管理中心</div>
|
|
<div class="breadcrumb mt-1">
|
|
<span class="breadcrumb-item" onclick="navigateToMenu('data-channel')" style="cursor: pointer;">数字督查</span>
|
|
<span class="breadcrumb-item" onclick="navigateToMenu('data-channel')" style="cursor: pointer;">数据应用管理</span>
|
|
<span class="breadcrumb-item" id="breadcrumbCurrent" onclick="navigateCurrentMenu()" style="cursor: pointer;">数据通道</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4 text-sm text-gray-600">
|
|
<span><i class="fas fa-clock mr-1"></i>数据更新时间: 2026-04-17 10:30</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 可滚动内容区 -->
|
|
<main class="flex-1 overflow-y-auto overflow-x-hidden p-6">
|
|
<!-- 数据通道页面 -->
|
|
<div id="data-channel" class="tab-content active">
|
|
<!-- 快速统计 -->
|
|
<div class="quick-stats">
|
|
<div class="stat-card">
|
|
<div class="stat-value">128</div>
|
|
<div class="stat-label">活跃数据接口</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">45</div>
|
|
<div class="stat-label">已对接数据源</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">99.9%</div>
|
|
<div class="stat-label">接口可用率</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">2,540万条</div>
|
|
<div class="stat-label">日处理数据条数</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 查询筛选区域 -->
|
|
<div class="bg-gray-50 rounded-xl p-3 mb-3 filter-compact">
|
|
<div class="grid grid-cols-1 md:grid-cols-7 gap-4 items-end">
|
|
<!-- 数据源名称 -->
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block flex items-center">
|
|
<i class="fas fa-database mr-1 text-gray-500"></i>数据源名称
|
|
</label>
|
|
<div class="relative">
|
|
<input type="text" placeholder="请输入名称"
|
|
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400 text-sm"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 类型 -->
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block flex items-center">
|
|
<i class="fas fa-code-branch mr-1 text-gray-500"></i>数据源类型
|
|
</label>
|
|
<select class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition appearance-none">
|
|
<option>全部类型</option>
|
|
<option>API接口</option>
|
|
<option>数据库连接</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 状态 -->
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block flex items-center">
|
|
<i class="fas fa-tasks mr-1 text-gray-500"></i>运行状态
|
|
</label>
|
|
<select class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition appearance-none">
|
|
<option>全部状态</option>
|
|
<option class="text-green-600">● 运行中</option>
|
|
<option class="text-red-600">● 停止</option>
|
|
<option class="text-orange-600">● 接口故障</option>
|
|
<option class="text-yellow-600">● 异常波动</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 更新频率 -->
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block flex items-center">
|
|
<i class="fas fa-clock mr-1 text-gray-500"></i>更新频率
|
|
</label>
|
|
<select class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition appearance-none">
|
|
<option>全部频率</option>
|
|
<option>实时</option>
|
|
<option>每5分钟</option>
|
|
<option>每小时</option>
|
|
<option>每天</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 更新时间 -->
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block flex items-center">
|
|
<i class="fas fa-calendar-alt mr-1 text-gray-500"></i>更新时间
|
|
</label>
|
|
<input type="date" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
|
|
</div>
|
|
<div class="md:col-span-2 flex gap-2">
|
|
<button class="filter-compact-btn border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
|
|
<i class="fas fa-undo mr-2"></i>重置
|
|
</button>
|
|
<button class="filter-compact-btn bg-blue-600 text-white hover:bg-blue-700 transition">
|
|
<i class="fas fa-search mr-2"></i>查询
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮组 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<button onclick="openDataSourceModal()" class="btn-primary mr-3">
|
|
<i class="fas fa-plus mr-2"></i>新建数据源
|
|
</button>
|
|
<button class="filter-compact-btn bg-gray-200 text-gray-700 hover:bg-gray-300 transition">
|
|
<i class="fas fa-sync mr-2"></i>刷新
|
|
</button>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
|
|
<!-- 数据源列表 -->
|
|
<div class="card asset-list-only">
|
|
<div class="p-4">
|
|
<h2 class="text-xl font-bold mb-4">数据源列表</h2>
|
|
<div class="overflow-x-auto list-panel">
|
|
<table class="w-full table-compact">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-3 px-4">数据源名称</th>
|
|
<th class="text-left py-3 px-4">类型</th>
|
|
<th class="text-left py-3 px-4">状态</th>
|
|
<th class="text-left py-3 px-4">更新频率</th>
|
|
<th class="text-left py-3 px-4">今日调用次数</th>
|
|
<th class="text-left py-3 px-4">最后更新时间</th>
|
|
<th class="text-left py-3 px-4">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="table-row border-b">
|
|
<td class="py-3 px-4">
|
|
<div>
|
|
<p class="font-medium">执法办案系统</p>
|
|
<p class="text-sm text-gray-500">同步案件信息、人员信息等</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">API接口</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">
|
|
<i class="fas fa-exclamation-circle mr-1"></i>接口故障
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">实时</td>
|
|
<td class="py-3 px-4">-</td>
|
|
<td class="py-3 px-4">2024-04-15 10:30</td>
|
|
<td class="py-3 px-4">
|
|
<button onclick="toggleDataSourceStatus('执法办案系统')" class="op-btn bg-green-100 text-green-700 hover:bg-green-200 transition mr-2">
|
|
<i class="fas fa-play mr-1"></i>启动
|
|
</button>
|
|
<button onclick="showDataSourceDetails('执法办案系统')" class="text-blue-600 hover:text-blue-800 mr-3">
|
|
<i class="fas fa-info-circle"></i>查看详情
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-800">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row border-b">
|
|
<td class="py-3 px-4">
|
|
<div>
|
|
<p class="font-medium">户政管理系统</p>
|
|
<p class="text-sm text-gray-500">户籍信息、身份证数据</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">API接口</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
|
|
<i class="fas fa-check-circle mr-1"></i>运行中
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">每小时</td>
|
|
<td class="py-3 px-4">8,234</td>
|
|
<td class="py-3 px-4">2024-04-15 10:00</td>
|
|
<td class="py-3 px-4">
|
|
<button onclick="toggleDataSourceStatus('户政管理系统')" class="op-btn bg-red-100 text-red-700 hover:bg-red-200 transition mr-2">
|
|
<i class="fas fa-pause mr-1"></i>停止
|
|
</button>
|
|
<button onclick="showDataSourceDetails('户政管理系统')" class="text-blue-600 hover:text-blue-800 mr-3">
|
|
<i class="fas fa-info-circle"></i>查看详情
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-800">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row border-b">
|
|
<td class="py-3 px-4">
|
|
<div>
|
|
<p class="font-medium">交通管理系统</p>
|
|
<p class="text-sm text-gray-500">违法记录、车辆信息</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">API接口</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
|
|
<i class="fas fa-check-circle mr-1"></i>运行中
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">实时</td>
|
|
<td class="py-3 px-4">15,678</td>
|
|
<td class="py-3 px-4">2024-04-15 10:15</td>
|
|
<td class="py-3 px-4">
|
|
<button onclick="toggleDataSourceStatus('交通管理系统')" class="op-btn bg-red-100 text-red-700 hover:bg-red-200 transition mr-2">
|
|
<i class="fas fa-pause mr-1"></i>停止
|
|
</button>
|
|
<button onclick="showDataSourceDetails('交通管理系统')" class="text-blue-600 hover:text-blue-800 mr-3">
|
|
<i class="fas fa-info-circle"></i>查看详情
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-800">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">警情汇聚接口</p><p class="text-sm text-gray-500">警情主数据同步</p></div></td><td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">API接口</span></td><td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs"><i class="fas fa-check-circle mr-1"></i>运行中</span></td><td class="py-3 px-4">实时</td><td class="py-3 px-4">6,542</td><td class="py-3 px-4">2024-04-15 10:18</td><td class="py-3 px-4"><button class="op-btn bg-red-100 text-red-700 hover:bg-red-200 transition mr-2"><i class="fas fa-pause mr-1"></i>停止</button><button class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-info-circle"></i>查看详情</button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">执法日志库连接</p><p class="text-sm text-gray-500">执法日志明细</p></div></td><td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">数据库连接</span></td><td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs"><i class="fas fa-check-circle mr-1"></i>运行中</span></td><td class="py-3 px-4">每小时</td><td class="py-3 px-4">4,320</td><td class="py-3 px-4">2024-04-15 09:50</td><td class="py-3 px-4"><button class="op-btn bg-red-100 text-red-700 hover:bg-red-200 transition mr-2"><i class="fas fa-pause mr-1"></i>停止</button><button class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-info-circle"></i>查看详情</button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">队伍考核库连接</p><p class="text-sm text-gray-500">民警考核数据</p></div></td><td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">数据库连接</span></td><td class="py-3 px-4"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs"><i class="fas fa-exclamation-triangle mr-1"></i>异常波动</span></td><td class="py-3 px-4">每天</td><td class="py-3 px-4">1,560</td><td class="py-3 px-4">2024-04-15 08:30</td><td class="py-3 px-4"><button class="op-btn bg-red-100 text-red-700 hover:bg-red-200 transition mr-2"><i class="fas fa-pause mr-1"></i>停止</button><button class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-info-circle"></i>查看详情</button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">问题整改接口</p><p class="text-sm text-gray-500">整改闭环同步</p></div></td><td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">API接口</span></td><td class="py-3 px-4"><span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs"><i class="fas fa-exclamation-circle mr-1"></i>接口故障</span></td><td class="py-3 px-4">每5分钟</td><td class="py-3 px-4">-</td><td class="py-3 px-4">2024-04-15 10:12</td><td class="py-3 px-4"><button class="op-btn bg-green-100 text-green-700 hover:bg-green-200 transition mr-2"><i class="fas fa-play mr-1"></i>启动</button><button class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-info-circle"></i>查看详情</button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">信访手动上传通道</p><p class="text-sm text-gray-500">批量Excel导入</p></div></td><td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">手动上传</span></td><td class="py-3 px-4"><span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs"><i class="fas fa-pause-circle mr-1"></i>停用</span></td><td class="py-3 px-4">按需</td><td class="py-3 px-4">0</td><td class="py-3 px-4">2024-04-12 16:00</td><td class="py-3 px-4"><button class="op-btn bg-green-100 text-green-700 hover:bg-green-200 transition mr-2"><i class="fas fa-play mr-1"></i>启动</button><button class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-info-circle"></i>查看详情</button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">地图轨迹接口</p><p class="text-sm text-gray-500">轨迹定位数据</p></div></td><td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">API接口</span></td><td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs"><i class="fas fa-check-circle mr-1"></i>运行中</span></td><td class="py-3 px-4">实时</td><td class="py-3 px-4">9,876</td><td class="py-3 px-4">2024-04-15 10:20</td><td class="py-3 px-4"><button class="op-btn bg-red-100 text-red-700 hover:bg-red-200 transition mr-2"><i class="fas fa-pause mr-1"></i>停止</button><button class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-info-circle"></i>查看详情</button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">民意回访接口</p><p class="text-sm text-gray-500">回访评价数据</p></div></td><td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">API接口</span></td><td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs"><i class="fas fa-check-circle mr-1"></i>运行中</span></td><td class="py-3 px-4">每小时</td><td class="py-3 px-4">2,341</td><td class="py-3 px-4">2024-04-15 09:30</td><td class="py-3 px-4"><button class="op-btn bg-red-100 text-red-700 hover:bg-red-200 transition mr-2"><i class="fas fa-pause mr-1"></i>停止</button><button class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-info-circle"></i>查看详情</button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据汇聚页面 -->
|
|
<div id="data-convergence" class="tab-content">
|
|
<div class="quick-stats mb-4" style="grid-template-columns:repeat(3,minmax(180px,1fr));gap:0.75rem;">
|
|
<div class="stat-card">
|
|
<div class="stat-value">100%</div>
|
|
<div class="stat-label">执法办案数据接入率</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">100%</div>
|
|
<div class="stat-label">户政管理数据接入率</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">100%</div>
|
|
<div class="stat-label">交通管理数据接入率</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 抽取任务管理 -->
|
|
<div class="card mb-6">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold">抽取任务管理</h3>
|
|
<button onclick="openExtractionTaskModal()" class="btn-primary">
|
|
<i class="fas fa-plus mr-2"></i>新建抽取任务
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 任务筛选 -->
|
|
<div class="bg-gray-50 rounded-xl p-3 mb-3 filter-compact">
|
|
<div class="grid grid-cols-1 md:grid-cols-6 gap-4 items-end">
|
|
<!-- 任务名称 -->
|
|
<div class="md:col-span-1">
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block flex items-center">
|
|
<i class="fas fa-tag mr-1 text-gray-500"></i>任务名称
|
|
</label>
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索任务名称..."
|
|
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400 text-sm"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日期范围 -->
|
|
<div class="md:col-span-2">
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block flex items-center">
|
|
<i class="fas fa-calendar mr-1 text-gray-500"></i>日期范围
|
|
</label>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<input type="date" class="px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
|
|
<input type="date" class="px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 任务类型 -->
|
|
<div class="md:col-span-1">
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block flex items-center">
|
|
<i class="fas fa-layer-group mr-1 text-gray-500"></i>任务类型
|
|
</label>
|
|
<select class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition appearance-none">
|
|
<option>全部任务</option>
|
|
<option>批量抽取</option>
|
|
<option>日期抽取</option>
|
|
<option>指定条件抽取</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 执行状态 -->
|
|
<div class="md:col-span-1">
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block flex items-center">
|
|
<i class="fas fa-check-circle mr-1 text-gray-500"></i>执行状态
|
|
</label>
|
|
<select class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition appearance-none">
|
|
<option>全部状态</option>
|
|
<option class="text-green-600">● 已完成</option>
|
|
<option class="text-blue-600">● 执行中</option>
|
|
<option class="text-yellow-600">● 等待中</option>
|
|
<option class="text-red-600">● 失败</option>
|
|
</select>
|
|
</div>
|
|
<div class="md:col-span-1 flex gap-2">
|
|
<button class="filter-compact-btn border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
|
|
<i class="fas fa-undo mr-2"></i>重置
|
|
</button>
|
|
<button class="filter-compact-btn bg-blue-600 text-white hover:bg-blue-700 transition">
|
|
<i class="fas fa-search mr-2"></i>查询
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 任务列表 -->
|
|
<div id="convergenceMainPanel" class="overflow-x-auto list-panel-tight">
|
|
<table class="w-full table-compact">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-3 px-4">任务名称</th>
|
|
<th class="text-left py-3 px-4">数据源</th>
|
|
<th class="text-left py-3 px-4">抽取方式</th>
|
|
<th class="text-left py-3 px-4">抽取条件</th>
|
|
<th class="text-left py-3 px-4">数据量</th>
|
|
<th class="text-left py-3 px-4">状态</th>
|
|
<th class="text-left py-3 px-4">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="table-row border-b">
|
|
<td class="py-3 px-4">
|
|
<div>
|
|
<p class="font-medium">执法案件批量抽取</p>
|
|
<p class="text-sm text-gray-500">按案件类型和时间范围</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">执法办案系统</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">批量抽取</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-sm">刑事案件、2024-01-01至2024-04-15</td>
|
|
<td class="py-3 px-4">2,300,000条</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
|
|
<i class="fas fa-check-circle mr-1"></i>已完成
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<button onclick="showExtractionRunsPage('执法案件批量抽取')" class="text-blue-600 hover:text-blue-800 mr-3">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="text-green-600 hover:text-green-800 mr-3">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-800">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row border-b">
|
|
<td class="py-3 px-4">
|
|
<div>
|
|
<p class="font-medium">交通违法日报抽取</p>
|
|
<p class="text-sm text-gray-500">按日期指定抽取</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">交通管理系统</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">日期抽取</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-sm">2024-04-15</td>
|
|
<td class="py-3 px-4">456,000条</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">
|
|
<i class="fas fa-spinner fa-spin mr-1"></i>执行中
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<button onclick="showExtractionRunsPage('交通违法日报抽取')" class="text-blue-600 hover:text-blue-800 mr-3">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="text-gray-600 hover:text-gray-800 mr-3">
|
|
<i class="fas fa-pause"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-800">
|
|
<i class="fas fa-stop"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row border-b">
|
|
<td class="py-3 px-4">
|
|
<div>
|
|
<p class="font-medium">户籍信息条件抽取</p>
|
|
<p class="text-sm text-gray-500">按指定条件过滤</p>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">户政管理系统</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">条件抽取</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-sm">户籍类型=常住、年龄>60</td>
|
|
<td class="py-3 px-4">1,200,000条</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs">
|
|
<i class="fas fa-clock mr-1"></i>等待中
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<button onclick="showExtractionRunsPage('户籍信息条件抽取')" class="text-blue-600 hover:text-blue-800 mr-3">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<button class="text-green-600 hover:text-green-800 mr-3">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-800">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">警情全量抽取</p><p class="text-sm text-gray-500">每日全量</p></div></td><td class="py-3 px-4">警情系统</td><td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">批量抽取</span></td><td class="py-3 px-4 text-sm">2024-04-15全量</td><td class="py-3 px-4">3,600,000条</td><td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">已完成</span></td><td class="py-3 px-4"><button onclick="showExtractionRunsPage('警情全量抽取')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i></button><button class="text-green-600 hover:text-green-800 mr-3"><i class="fas fa-download"></i></button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">整改任务增量抽取</p><p class="text-sm text-gray-500">按更新时间增量</p></div></td><td class="py-3 px-4">整改平台</td><td class="py-3 px-4"><span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">条件抽取</span></td><td class="py-3 px-4 text-sm">update_time>='2024-04-15'</td><td class="py-3 px-4">690,000条</td><td class="py-3 px-4"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">执行中</span></td><td class="py-3 px-4"><button onclick="showExtractionRunsPage('整改任务增量抽取')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i></button><button class="text-gray-600 hover:text-gray-800 mr-3"><i class="fas fa-pause"></i></button><button class="text-red-600 hover:text-red-800"><i class="fas fa-stop"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">民意回访周抽取</p><p class="text-sm text-gray-500">每周一汇总</p></div></td><td class="py-3 px-4">民意系统</td><td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">日期抽取</span></td><td class="py-3 px-4 text-sm">2024-04-08~2024-04-14</td><td class="py-3 px-4">1,100,000条</td><td class="py-3 px-4"><span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs">等待中</span></td><td class="py-3 px-4"><button onclick="showExtractionRunsPage('民意回访周抽取')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i></button><button class="text-green-600 hover:text-green-800 mr-3"><i class="fas fa-play"></i></button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">交通违法明细抽取</p><p class="text-sm text-gray-500">按处罚类型筛选</p></div></td><td class="py-3 px-4">交通管理系统</td><td class="py-3 px-4"><span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">条件抽取</span></td><td class="py-3 px-4 text-sm">处罚类型='超速'</td><td class="py-3 px-4">840,000条</td><td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">已完成</span></td><td class="py-3 px-4"><button onclick="showExtractionRunsPage('交通违法明细抽取')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i></button><button class="text-green-600 hover:text-green-800 mr-3"><i class="fas fa-download"></i></button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">视频巡查线索抽取</p><p class="text-sm text-gray-500">按标签抽取</p></div></td><td class="py-3 px-4">视频平台</td><td class="py-3 px-4"><span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">条件抽取</span></td><td class="py-3 px-4 text-sm">标签 in ('异常','高危')</td><td class="py-3 px-4">520,000条</td><td class="py-3 px-4"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">执行中</span></td><td class="py-3 px-4"><button onclick="showExtractionRunsPage('视频巡查线索抽取')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i></button><button class="text-gray-600 hover:text-gray-800 mr-3"><i class="fas fa-pause"></i></button><button class="text-red-600 hover:text-red-800"><i class="fas fa-stop"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">语音督查日抽取</p><p class="text-sm text-gray-500">按日批次</p></div></td><td class="py-3 px-4">语音平台</td><td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">日期抽取</span></td><td class="py-3 px-4 text-sm">2024-04-15</td><td class="py-3 px-4">380,000条</td><td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">已完成</span></td><td class="py-3 px-4"><button onclick="showExtractionRunsPage('语音督查日抽取')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i></button><button class="text-green-600 hover:text-green-800 mr-3"><i class="fas fa-download"></i></button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
<tr class="table-row border-b"><td class="py-3 px-4"><div><p class="font-medium">执法档案月抽取</p><p class="text-sm text-gray-500">按月汇总</p></div></td><td class="py-3 px-4">档案系统</td><td class="py-3 px-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">批量抽取</span></td><td class="py-3 px-4 text-sm">2024-03-01~2024-03-31</td><td class="py-3 px-4">2,100,000条</td><td class="py-3 px-4"><span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs">等待中</span></td><td class="py-3 px-4"><button onclick="showExtractionRunsPage('执法档案月抽取')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i></button><button class="text-green-600 hover:text-green-800 mr-3"><i class="fas fa-play"></i></button><button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 执行任务列表(页面内展示) -->
|
|
<div id="convergenceRunsPanel" class="hidden">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h4 class="text-lg font-semibold" id="convergenceRunsTitle">任务执行列表</h4>
|
|
<button onclick="backToConvergenceMain()" class="px-4 py-2 border rounded-lg hover:bg-gray-50">返回任务总览</button>
|
|
</div>
|
|
<div class="overflow-x-auto list-panel-tight" style="max-height: calc(100vh - 320px);">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2 px-3">执行批次</th>
|
|
<th class="text-left py-2 px-3">开始时间</th>
|
|
<th class="text-left py-2 px-3">结束时间</th>
|
|
<th class="text-left py-2 px-3">抽取记录数</th>
|
|
<th class="text-left py-2 px-3">状态</th>
|
|
<th class="text-left py-2 px-3">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">RUN-20260415-001</td>
|
|
<td class="py-2 px-3">10:00:01</td>
|
|
<td class="py-2 px-3">10:02:30</td>
|
|
<td class="py-2 px-3">12,436</td>
|
|
<td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td>
|
|
<td class="py-2 px-3">
|
|
<button onclick="showExtractionSummaryPage('RUN-20260415-001')" class="text-blue-600 hover:text-blue-800">
|
|
<i class="fas fa-eye mr-1"></i>详情
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">RUN-20260414-003</td>
|
|
<td class="py-2 px-3">09:30:20</td>
|
|
<td class="py-2 px-3">09:33:11</td>
|
|
<td class="py-2 px-3">11,902</td>
|
|
<td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td>
|
|
<td class="py-2 px-3">
|
|
<button onclick="showExtractionSummaryPage('RUN-20260414-003')" class="text-blue-600 hover:text-blue-800">
|
|
<i class="fas fa-eye mr-1"></i>详情
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="border-b"><td class="py-2 px-3">RUN-20260414-002</td><td class="py-2 px-3">08:30:11</td><td class="py-2 px-3">08:33:02</td><td class="py-2 px-3">10,886</td><td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td><td class="py-2 px-3"><button onclick="showExtractionSummaryPage('RUN-20260414-002')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye mr-1"></i>详情</button></td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">RUN-20260414-001</td><td class="py-2 px-3">07:59:40</td><td class="py-2 px-3">08:02:15</td><td class="py-2 px-3">9,761</td><td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td><td class="py-2 px-3"><button onclick="showExtractionSummaryPage('RUN-20260414-001')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye mr-1"></i>详情</button></td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">RUN-20260413-004</td><td class="py-2 px-3">10:20:10</td><td class="py-2 px-3">10:23:59</td><td class="py-2 px-3">13,452</td><td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td><td class="py-2 px-3"><button onclick="showExtractionSummaryPage('RUN-20260413-004')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye mr-1"></i>详情</button></td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">RUN-20260413-003</td><td class="py-2 px-3">09:11:08</td><td class="py-2 px-3">09:14:37</td><td class="py-2 px-3">11,907</td><td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td><td class="py-2 px-3"><button onclick="showExtractionSummaryPage('RUN-20260413-003')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye mr-1"></i>详情</button></td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">RUN-20260413-002</td><td class="py-2 px-3">08:05:28</td><td class="py-2 px-3">08:08:18</td><td class="py-2 px-3">8,532</td><td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td><td class="py-2 px-3"><button onclick="showExtractionSummaryPage('RUN-20260413-002')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye mr-1"></i>详情</button></td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">RUN-20260413-001</td><td class="py-2 px-3">07:00:02</td><td class="py-2 px-3">07:03:43</td><td class="py-2 px-3">7,806</td><td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td><td class="py-2 px-3"><button onclick="showExtractionSummaryPage('RUN-20260413-001')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye mr-1"></i>详情</button></td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">RUN-20260412-003</td><td class="py-2 px-3">11:30:12</td><td class="py-2 px-3">11:34:05</td><td class="py-2 px-3">14,209</td><td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td><td class="py-2 px-3"><button onclick="showExtractionSummaryPage('RUN-20260412-003')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye mr-1"></i>详情</button></td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">RUN-20260412-002</td><td class="py-2 px-3">09:40:33</td><td class="py-2 px-3">09:43:11</td><td class="py-2 px-3">10,441</td><td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td><td class="py-2 px-3"><button onclick="showExtractionSummaryPage('RUN-20260412-002')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye mr-1"></i>详情</button></td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">RUN-20260412-001</td><td class="py-2 px-3">08:18:59</td><td class="py-2 px-3">08:21:22</td><td class="py-2 px-3">9,502</td><td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td><td class="py-2 px-3"><button onclick="showExtractionSummaryPage('RUN-20260412-001')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-eye mr-1"></i>详情</button></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 抽取汇总(页面内展示) -->
|
|
<div id="convergenceSummaryPanel" class="hidden">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h4 class="text-lg font-semibold" id="convergenceSummaryTitle">抽取数据汇总</h4>
|
|
<button onclick="backToConvergenceRuns()" class="px-4 py-2 border rounded-lg hover:bg-gray-50">返回执行列表</button>
|
|
</div>
|
|
<div class="overflow-x-auto list-panel-tight" style="max-height: calc(100vh - 320px);">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2 px-3">数据表</th>
|
|
<th class="text-left py-2 px-3">抽取条数</th>
|
|
<th class="text-left py-2 px-3">成功条数</th>
|
|
<th class="text-left py-2 px-3">失败条数</th>
|
|
<th class="text-left py-2 px-3">校验结果</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b"><td class="py-2 px-3">案件主表</td><td class="py-2 px-3">8,000</td><td class="py-2 px-3">7,998</td><td class="py-2 px-3">2</td><td class="py-2 px-3">通过(2条缺失字段已入异常队列)</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">当事人表</td><td class="py-2 px-3">3,200</td><td class="py-2 px-3">3,200</td><td class="py-2 px-3">0</td><td class="py-2 px-3">通过</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">处理结果表</td><td class="py-2 px-3">1,236</td><td class="py-2 px-3">1,236</td><td class="py-2 px-3">0</td><td class="py-2 px-3">通过</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">案件流程表</td><td class="py-2 px-3">2,314</td><td class="py-2 px-3">2,313</td><td class="py-2 px-3">1</td><td class="py-2 px-3">通过(1条时间格式异常)</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">线索来源表</td><td class="py-2 px-3">1,142</td><td class="py-2 px-3">1,142</td><td class="py-2 px-3">0</td><td class="py-2 px-3">通过</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">受害人信息表</td><td class="py-2 px-3">2,980</td><td class="py-2 px-3">2,979</td><td class="py-2 px-3">1</td><td class="py-2 px-3">通过(1条证件号缺失)</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">嫌疑人信息表</td><td class="py-2 px-3">2,156</td><td class="py-2 px-3">2,156</td><td class="py-2 px-3">0</td><td class="py-2 px-3">通过</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">涉案物品表</td><td class="py-2 px-3">1,530</td><td class="py-2 px-3">1,530</td><td class="py-2 px-3">0</td><td class="py-2 px-3">通过</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">办案单位表</td><td class="py-2 px-3">684</td><td class="py-2 px-3">684</td><td class="py-2 px-3">0</td><td class="py-2 px-3">通过</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">民警办理记录表</td><td class="py-2 px-3">3,422</td><td class="py-2 px-3">3,420</td><td class="py-2 px-3">2</td><td class="py-2 px-3">通过(2条重复主键自动去重)</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">案件状态变更表</td><td class="py-2 px-3">1,248</td><td class="py-2 px-3">1,248</td><td class="py-2 px-3">0</td><td class="py-2 px-3">通过</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">案件附件索引表</td><td class="py-2 px-3">5,762</td><td class="py-2 px-3">5,761</td><td class="py-2 px-3">1</td><td class="py-2 px-3">通过(1条文件路径非法)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 数据资产页面 -->
|
|
<div id="data-assets" class="tab-content">
|
|
<div class="mb-6 border-b border-gray-200">
|
|
<div class="flex gap-2">
|
|
<button id="assetListTabBtn" class="menu-item active px-4 py-2 font-medium" onclick="switchAssetTab('list')">资产列表</button>
|
|
<button id="assetTagTabBtn" class="menu-item px-4 py-2 font-medium" onclick="switchAssetTab('tag')">数据分类标签</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4 asset-list-only asset-main-only bg-gray-50 rounded-xl p-3 filter-compact">
|
|
<div class="grid grid-cols-1 md:grid-cols-7 gap-3 items-end">
|
|
<div class="md:col-span-2">
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block">数据表名称</label>
|
|
<div class="relative">
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
|
|
<input id="assetSearchInput" type="text" placeholder="搜索数据表..." oninput="filterAssetRows()" class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block">标签筛选</label>
|
|
<select id="assetTagFilter" onchange="filterAssetRows()" class="w-full px-3 py-2 border rounded-lg text-sm">
|
|
<option value="">全部标签</option>
|
|
<option value="执法">执法</option>
|
|
<option value="预警">预警</option>
|
|
<option value="问题处置">问题处置</option>
|
|
<option value="业务分析">业务分析</option>
|
|
<option value="隐私">隐私</option>
|
|
<option value="涉密">涉密</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block">访问权限</label>
|
|
<select id="assetPermFilter" onchange="filterAssetRows()" class="w-full px-3 py-2 border rounded-lg text-sm">
|
|
<option value="">全部权限</option>
|
|
<option value="内部使用">内部使用</option>
|
|
<option value="受限访问">受限访问</option>
|
|
<option value="涉密访问">涉密访问</option>
|
|
</select>
|
|
</div>
|
|
<div class="md:col-span-1 flex items-end gap-2">
|
|
<button onclick="resetAssetFilters()" class="filter-compact-btn border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
|
|
<i class="fas fa-undo mr-1"></i>重置
|
|
</button>
|
|
<button onclick="filterAssetRows()" class="filter-compact-btn bg-blue-600 text-white hover:bg-blue-700 transition">
|
|
<i class="fas fa-search mr-1"></i>查询
|
|
</button>
|
|
</div>
|
|
<div class="md:col-span-2 flex justify-end gap-2">
|
|
<button onclick="openBatchExportModal()" class="filter-compact-btn border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
|
|
<i class="fas fa-download mr-1"></i>批量导出
|
|
</button>
|
|
<button onclick="openBatchImportModal()" class="filter-compact-btn border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
|
|
<i class="fas fa-upload mr-1"></i>批量导入
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据权限说明 -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4 asset-list-only asset-main-only">
|
|
<h3 class="font-semibold text-blue-800 mb-2">
|
|
<i class="fas fa-info-circle mr-2"></i>数据权限说明
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<h4 class="font-medium mb-2">数据分类</h4>
|
|
<p class="text-sm text-gray-600">不同角色可以查看不同的数据库表,基于部门权限和业务需求进行数据隔离。</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium mb-2">数据分级</h4>
|
|
<p class="text-sm text-gray-600">不同角色可以查看不同的数据库字段,保护敏感数据,确保数据安全。</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="showPermissionDemo()" class="mt-3 text-blue-600 hover:underline text-sm">
|
|
<i class="fas fa-eye mr-1"></i>查看权限示例
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 数据分类标签体系 -->
|
|
<div id="assetTagPane" class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6 hidden">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-800">
|
|
<i class="fas fa-tags mr-2 text-blue-600"></i>数据分类标签
|
|
</h3>
|
|
<div class="flex items-center gap-2">
|
|
<button onclick="openTagModal()" class="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
|
|
<i class="fas fa-plus mr-1"></i>新建标签
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分级分类体系 -->
|
|
<div class="mb-6">
|
|
<h4 class="text-sm font-medium text-gray-700 mb-3 flex items-center">
|
|
<i class="fas fa-sitemap mr-1 text-gray-500"></i>业务分类
|
|
</h4>
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
|
|
<div class="border rounded-xl p-4 bg-blue-50/40">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="font-semibold text-blue-800">执法</span>
|
|
<span class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded">类别总数:5</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500 mb-2">点击类别查看详情</div>
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<button type="button" class="px-2 py-1 text-xs rounded border bg-white text-blue-700 hover:bg-blue-50 bg-blue-100 font-semibold" onclick="toggleMidCategory(this, 'mid-zf-jq')">警情</button>
|
|
<button type="button" class="px-2 py-1 text-xs rounded border bg-white text-blue-700 hover:bg-blue-50" onclick="toggleMidCategory(this, 'mid-zf-aj')">案件</button>
|
|
</div>
|
|
<div id="mid-zf-jq" class="rounded-lg border bg-white p-3 mb-2">
|
|
<p class="text-xs text-gray-500 mb-1">警情</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="text-xs px-2 py-1 rounded bg-blue-50 border text-gray-700">接警</span>
|
|
<span class="text-xs px-2 py-1 rounded bg-blue-50 border text-gray-700">处警</span>
|
|
<span class="text-xs px-2 py-1 rounded bg-blue-50 border text-gray-700">反馈</span>
|
|
</div>
|
|
</div>
|
|
<div id="mid-zf-aj" class="hidden rounded-lg border bg-white p-3">
|
|
<p class="text-xs text-gray-500 mb-1">案件</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="text-xs px-2 py-1 rounded bg-blue-50 border text-gray-700">刑事案件</span>
|
|
<span class="text-xs px-2 py-1 rounded bg-blue-50 border text-gray-700">行政案件</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-xl p-4 bg-green-50/40">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="font-semibold text-green-800">交通</span>
|
|
<span class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded">类别总数:4</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500 mb-2">点击类别查看详情</div>
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<button type="button" class="px-2 py-1 text-xs rounded border bg-white text-green-700 hover:bg-green-50 bg-green-100 font-semibold" onclick="toggleMidCategory(this, 'mid-jt-wf')">违法记录</button>
|
|
<button type="button" class="px-2 py-1 text-xs rounded border bg-white text-green-700 hover:bg-green-50" onclick="toggleMidCategory(this, 'mid-jt-cl')">车辆信息</button>
|
|
</div>
|
|
<div id="mid-jt-wf" class="rounded-lg border bg-white p-3 mb-2">
|
|
<p class="text-xs text-gray-500 mb-1">违法记录</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="text-xs px-2 py-1 rounded bg-green-50 border text-gray-700">交通违法</span>
|
|
<span class="text-xs px-2 py-1 rounded bg-green-50 border text-gray-700">违停记录</span>
|
|
</div>
|
|
</div>
|
|
<div id="mid-jt-cl" class="hidden rounded-lg border bg-white p-3">
|
|
<p class="text-xs text-gray-500 mb-1">车辆信息</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="text-xs px-2 py-1 rounded bg-green-50 border text-gray-700">机动车</span>
|
|
<span class="text-xs px-2 py-1 rounded bg-green-50 border text-gray-700">非机动车</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-xl p-4 bg-purple-50/40">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="font-semibold text-purple-800">队伍</span>
|
|
<span class="text-xs px-2 py-1 bg-purple-100 text-purple-700 rounded">类别总数:3</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500 mb-2">点击类别查看详情</div>
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<button type="button" class="px-2 py-1 text-xs rounded border bg-white text-purple-700 hover:bg-purple-50 bg-purple-100 font-semibold" onclick="toggleMidCategory(this, 'mid-dw-ry')">人员管理</button>
|
|
</div>
|
|
<div id="mid-dw-ry" class="rounded-lg border bg-white p-3">
|
|
<p class="text-xs text-gray-500 mb-1">人员管理</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="text-xs px-2 py-1 rounded bg-purple-50 border text-gray-700">基本信息</span>
|
|
<span class="text-xs px-2 py-1 rounded bg-purple-50 border text-gray-700">考核记录</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据敏感度说明(仅展示,非表单选项) -->
|
|
<div>
|
|
<h4 class="text-sm font-medium text-gray-700 mb-3 flex items-center">
|
|
<i class="fas fa-shield-alt mr-1 text-gray-500"></i>数据敏感度说明
|
|
</h4>
|
|
<div class="grid grid-cols-1 gap-3">
|
|
<div class="border border-green-200 rounded-lg p-6 min-h-[140px] bg-green-50/40">
|
|
<p class="font-medium text-green-800">非敏感数据 · 公开数据</p>
|
|
<p class="text-xs text-gray-600 mt-2 leading-relaxed">可对外公开或低敏感聚合展示,需符合信息公开与脱敏规范。</p>
|
|
</div>
|
|
<div class="border border-yellow-200 rounded-lg p-6 min-h-[140px] bg-yellow-50/40">
|
|
<p class="font-medium text-yellow-800">涉及用户隐私 · 内部数据</p>
|
|
<p class="text-xs text-gray-600 mt-2 leading-relaxed">仅限授权岗位在专网内访问,禁止导出至非受控环境。</p>
|
|
</div>
|
|
<div class="border border-red-200 rounded-lg p-6 min-h-[140px] bg-red-50/40">
|
|
<p class="font-medium text-red-800">涉密数据</p>
|
|
<p class="text-xs text-gray-600 mt-2 leading-relaxed">按国家秘密及警务工作秘密管理要求分级授权,最小必要原则使用。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card asset-list-only asset-main-only">
|
|
<div class="p-4 asset-list-only">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold">数据资产列表</h3>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 asset-list-only">
|
|
<div class="overflow-x-auto list-panel">
|
|
<table class="w-full table-compact">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-3 px-4">资产名称</th>
|
|
<th class="text-left py-3 px-4">所属数据库</th>
|
|
<th class="text-left py-3 px-4">数据量</th>
|
|
<th class="text-left py-3 px-4">分类标签</th>
|
|
<th class="text-left py-3 px-4">访问权限</th>
|
|
<th class="text-left py-3 px-4">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="assetTableBody">
|
|
<tr class="table-row border-b asset-row" data-name="案件主表" data-tags="执法,案件,业务标签" data-permission="内部使用">
|
|
<td class="py-3 px-4"><div class="flex items-center"><i class="fas fa-table text-blue-600 mr-2"></i><span>案件主表</span></div></td>
|
|
<td class="py-3 px-4">业务数据库</td>
|
|
<td class="py-3 px-4">124,325,678</td>
|
|
<td class="py-3 px-4"><span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs mr-1">执法</span><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs mr-1">案件</span><span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs">内部</span></td>
|
|
<td class="py-3 px-4"><span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">内部使用</span></td>
|
|
<td class="py-3 px-4"><button onclick="showAssetTableData('案件主表')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i>查看</button><button onclick="showPermissionInfo('业务数据库')" class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-shield-alt"></i>查看权限</button></td>
|
|
</tr>
|
|
<tr class="table-row border-b asset-row" data-name="当事人信息表" data-tags="执法,隐私,业务标签" data-permission="受限访问">
|
|
<td class="py-3 px-4"><div class="flex items-center"><i class="fas fa-table text-green-600 mr-2"></i><span>当事人信息表</span></div></td>
|
|
<td class="py-3 px-4">业务数据库</td>
|
|
<td class="py-3 px-4">86,042,341</td>
|
|
<td class="py-3 px-4"><span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs mr-1">执法</span><span class="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-xs">隐私</span></td>
|
|
<td class="py-3 px-4"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">受限访问</span></td>
|
|
<td class="py-3 px-4"><button onclick="showAssetTableData('当事人信息表')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i>查看</button><button onclick="showPermissionInfo('业务数据库')" class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-shield-alt"></i>查看权限</button></td>
|
|
</tr>
|
|
<tr class="table-row border-b asset-row" data-name="预警结果表" data-tags="预警,涉密,敏感度" data-permission="涉密访问">
|
|
<td class="py-3 px-4"><div class="flex items-center"><i class="fas fa-table text-red-600 mr-2"></i><span>预警结果表</span></div></td>
|
|
<td class="py-3 px-4">预警数据库</td>
|
|
<td class="py-3 px-4">42,001,245</td>
|
|
<td class="py-3 px-4"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded text-xs mr-1">预警</span><span class="bg-red-100 text-red-700 px-2 py-1 rounded text-xs">涉密</span></td>
|
|
<td class="py-3 px-4"><span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">涉密访问</span></td>
|
|
<td class="py-3 px-4"><button onclick="showAssetTableData('预警结果表')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i>查看</button><button onclick="showPermissionInfo('预警数据库')" class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-shield-alt"></i>查看权限</button></td>
|
|
</tr>
|
|
<tr class="table-row border-b asset-row" data-name="预警规则命中表" data-tags="预警,业务标签,敏感度" data-permission="内部使用">
|
|
<td class="py-3 px-4"><div class="flex items-center"><i class="fas fa-table text-purple-600 mr-2"></i><span>预警规则命中表</span></div></td>
|
|
<td class="py-3 px-4">预警数据库</td>
|
|
<td class="py-3 px-4">19,283,114</td>
|
|
<td class="py-3 px-4"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded text-xs mr-1">预警</span><span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs">业务标签</span></td>
|
|
<td class="py-3 px-4"><span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">内部使用</span></td>
|
|
<td class="py-3 px-4"><button onclick="showAssetTableData('预警规则命中表')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i>查看</button><button onclick="showPermissionInfo('预警数据库')" class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-shield-alt"></i>查看权限</button></td>
|
|
</tr>
|
|
<tr class="table-row border-b asset-row" data-name="问题整改跟踪表" data-tags="问题处置,业务标签,闭环" data-permission="内部使用">
|
|
<td class="py-3 px-4"><div class="flex items-center"><i class="fas fa-table text-teal-600 mr-2"></i><span>问题整改跟踪表</span></div></td>
|
|
<td class="py-3 px-4">问题数据库</td>
|
|
<td class="py-3 px-4">98,004,331</td>
|
|
<td class="py-3 px-4"><span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs mr-1">问题处置</span><span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs">闭环</span></td>
|
|
<td class="py-3 px-4"><span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">内部使用</span></td>
|
|
<td class="py-3 px-4"><button onclick="showAssetTableData('问题整改跟踪表')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i>查看</button><button onclick="showPermissionInfo('问题数据库')" class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-shield-alt"></i>查看权限</button></td>
|
|
</tr>
|
|
<tr class="table-row border-b asset-row" data-name="问题处置工单表" data-tags="问题处置,隐私,敏感度" data-permission="受限访问">
|
|
<td class="py-3 px-4"><div class="flex items-center"><i class="fas fa-table text-cyan-600 mr-2"></i><span>问题处置工单表</span></div></td>
|
|
<td class="py-3 px-4">问题数据库</td>
|
|
<td class="py-3 px-4">36,512,099</td>
|
|
<td class="py-3 px-4"><span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs mr-1">问题处置</span><span class="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-xs">隐私</span></td>
|
|
<td class="py-3 px-4"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">受限访问</span></td>
|
|
<td class="py-3 px-4"><button onclick="showAssetTableData('问题处置工单表')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i>查看</button><button onclick="showPermissionInfo('问题数据库')" class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-shield-alt"></i>查看权限</button></td>
|
|
</tr>
|
|
<tr class="table-row border-b asset-row" data-name="综合分析主题表" data-tags="业务分析,业务标签,专题" data-permission="内部使用">
|
|
<td class="py-3 px-4"><div class="flex items-center"><i class="fas fa-table text-indigo-600 mr-2"></i><span>综合分析主题表</span></div></td>
|
|
<td class="py-3 px-4">业务主题库</td>
|
|
<td class="py-3 px-4">27,650,842</td>
|
|
<td class="py-3 px-4"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs mr-1">业务分析</span><span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs">专题</span></td>
|
|
<td class="py-3 px-4"><span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">内部使用</span></td>
|
|
<td class="py-3 px-4"><button onclick="showAssetTableData('综合分析主题表')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i>查看</button><button onclick="showPermissionInfo('业务主题库')" class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-shield-alt"></i>查看权限</button></td>
|
|
</tr>
|
|
<tr class="table-row border-b asset-row" data-name="高频问题标签表" data-tags="业务分析,业务标签,受限" data-permission="受限访问">
|
|
<td class="py-3 px-4"><div class="flex items-center"><i class="fas fa-table text-pink-600 mr-2"></i><span>高频问题标签表</span></div></td>
|
|
<td class="py-3 px-4">业务主题库</td>
|
|
<td class="py-3 px-4">7,741,203</td>
|
|
<td class="py-3 px-4"><span class="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs mr-1">业务分析</span><span class="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-xs">受限</span></td>
|
|
<td class="py-3 px-4"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">受限访问</span></td>
|
|
<td class="py-3 px-4"><button onclick="showAssetTableData('高频问题标签表')" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-eye"></i>查看</button><button onclick="showPermissionInfo('业务主题库')" class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-shield-alt"></i>查看权限</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="assetPreviewPanel" class="card asset-list-only hidden">
|
|
<div class="p-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h3 id="assetPreviewPanelTitle" class="text-lg font-semibold">数据预览</h3>
|
|
<button onclick="backToAssetListPage()" class="filter-compact-btn border border-gray-300 text-gray-700 hover:bg-gray-50">返回资产列表</button>
|
|
</div>
|
|
<div class="overflow-x-auto list-panel" style="max-height: calc(100vh - 240px);">
|
|
<table class="w-full table-compact">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2 px-3">编号</th>
|
|
<th class="text-left py-2 px-3">字段A</th>
|
|
<th class="text-left py-2 px-3">字段B</th>
|
|
<th class="text-left py-2 px-3">字段C</th>
|
|
<th class="text-left py-2 px-3">更新时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="assetPreviewBody">
|
|
<tr class="border-b"><td class="py-2 px-3">1</td><td class="py-2 px-3">示例值-001</td><td class="py-2 px-3">示例值-A</td><td class="py-2 px-3">示例值-X</td><td class="py-2 px-3">2024-04-17 10:30</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">2</td><td class="py-2 px-3">示例值-002</td><td class="py-2 px-3">示例值-B</td><td class="py-2 px-3">示例值-Y</td><td class="py-2 px-3">2024-04-17 10:28</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">3</td><td class="py-2 px-3">示例值-003</td><td class="py-2 px-3">示例值-C</td><td class="py-2 px-3">示例值-Z</td><td class="py-2 px-3">2024-04-17 10:27</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">4</td><td class="py-2 px-3">示例值-004</td><td class="py-2 px-3">示例值-D</td><td class="py-2 px-3">示例值-W</td><td class="py-2 px-3">2024-04-17 10:24</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">5</td><td class="py-2 px-3">示例值-005</td><td class="py-2 px-3">示例值-E</td><td class="py-2 px-3">示例值-V</td><td class="py-2 px-3">2024-04-17 10:20</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">6</td><td class="py-2 px-3">示例值-006</td><td class="py-2 px-3">示例值-F</td><td class="py-2 px-3">示例值-U</td><td class="py-2 px-3">2024-04-17 10:18</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">7</td><td class="py-2 px-3">示例值-007</td><td class="py-2 px-3">示例值-G</td><td class="py-2 px-3">示例值-T</td><td class="py-2 px-3">2024-04-17 10:16</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">8</td><td class="py-2 px-3">示例值-008</td><td class="py-2 px-3">示例值-H</td><td class="py-2 px-3">示例值-S</td><td class="py-2 px-3">2024-04-17 10:14</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">9</td><td class="py-2 px-3">示例值-009</td><td class="py-2 px-3">示例值-I</td><td class="py-2 px-3">示例值-R</td><td class="py-2 px-3">2024-04-17 10:12</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">10</td><td class="py-2 px-3">示例值-010</td><td class="py-2 px-3">示例值-J</td><td class="py-2 px-3">示例值-Q</td><td class="py-2 px-3">2024-04-17 10:10</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">11</td><td class="py-2 px-3">示例值-011</td><td class="py-2 px-3">示例值-K</td><td class="py-2 px-3">示例值-P</td><td class="py-2 px-3">2024-04-17 10:08</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">12</td><td class="py-2 px-3">示例值-012</td><td class="py-2 px-3">示例值-L</td><td class="py-2 px-3">示例值-O</td><td class="py-2 px-3">2024-04-17 10:06</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">13</td><td class="py-2 px-3">示例值-013</td><td class="py-2 px-3">示例值-M</td><td class="py-2 px-3">示例值-N</td><td class="py-2 px-3">2024-04-17 10:04</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">14</td><td class="py-2 px-3">示例值-014</td><td class="py-2 px-3">示例值-N</td><td class="py-2 px-3">示例值-M</td><td class="py-2 px-3">2024-04-17 10:02</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">15</td><td class="py-2 px-3">示例值-015</td><td class="py-2 px-3">示例值-O</td><td class="py-2 px-3">示例值-L</td><td class="py-2 px-3">2024-04-17 10:00</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">16</td><td class="py-2 px-3">示例值-016</td><td class="py-2 px-3">示例值-P</td><td class="py-2 px-3">示例值-K</td><td class="py-2 px-3">2024-04-17 09:58</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">17</td><td class="py-2 px-3">示例值-017</td><td class="py-2 px-3">示例值-Q</td><td class="py-2 px-3">示例值-J</td><td class="py-2 px-3">2024-04-17 09:56</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">18</td><td class="py-2 px-3">示例值-018</td><td class="py-2 px-3">示例值-R</td><td class="py-2 px-3">示例值-I</td><td class="py-2 px-3">2024-04-17 09:54</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">19</td><td class="py-2 px-3">示例值-019</td><td class="py-2 px-3">示例值-S</td><td class="py-2 px-3">示例值-H</td><td class="py-2 px-3">2024-04-17 09:52</td></tr>
|
|
<tr class="border-b"><td class="py-2 px-3">20</td><td class="py-2 px-3">示例值-020</td><td class="py-2 px-3">示例值-T</td><td class="py-2 px-3">示例值-G</td><td class="py-2 px-3">2024-04-17 09:50</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 专题应用页面 -->
|
|
<div id="specialized-apps" class="tab-content">
|
|
<div class="card mb-6">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-semibold mb-4">数据库概览数据</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div class="bg-blue-50 rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-600">总数据库数</p>
|
|
<p class="text-2xl font-bold text-blue-600">4</p>
|
|
</div>
|
|
<i class="fas fa-database text-3xl text-blue-300"></i>
|
|
</div>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-600">总数据量</p>
|
|
<p class="text-2xl font-bold text-green-600">40.0TB</p>
|
|
</div>
|
|
<i class="fas fa-hdd text-3xl text-green-300"></i>
|
|
</div>
|
|
</div>
|
|
<div class="bg-purple-50 rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-600">总表数量</p>
|
|
<p class="text-2xl font-bold text-purple-600">513</p>
|
|
</div>
|
|
<i class="fas fa-table text-3xl text-purple-300"></i>
|
|
</div>
|
|
</div>
|
|
<div class="bg-orange-50 rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-600">平均表大小</p>
|
|
<p class="text-2xl font-bold text-orange-600">78GB</p>
|
|
</div>
|
|
<i class="fas fa-chart-bar text-3xl text-orange-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div class="card">
|
|
<div class="p-5">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0"><i class="fas fa-database text-2xl text-blue-600"></i></div>
|
|
<div class="w-full">
|
|
<h3 class="text-lg font-semibold mb-1">督察业务数据库</h3>
|
|
<p class="text-sm text-gray-600 mb-3">各类督察业务数据</p>
|
|
<div class="grid grid-cols-3 gap-2 text-xs text-gray-600">
|
|
<div class="bg-blue-50 rounded p-2"><p>数据量</p><p class="font-semibold text-blue-700">124,325,678条</p></div>
|
|
<div class="bg-blue-50 rounded p-2"><p>表数量</p><p class="font-semibold text-blue-700">234</p></div>
|
|
<div class="bg-blue-50 rounded p-2"><p>近7日访问</p><p class="font-semibold text-blue-700">6,842次</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="p-5">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0"><i class="fas fa-exclamation-triangle text-2xl text-red-600"></i></div>
|
|
<div class="w-full">
|
|
<h3 class="text-lg font-semibold mb-1">督察预警数据库</h3>
|
|
<p class="text-sm text-gray-600 mb-3">实时预警信息</p>
|
|
<div class="grid grid-cols-3 gap-2 text-xs text-gray-600">
|
|
<div class="bg-red-50 rounded p-2"><p>数据量</p><p class="font-semibold text-red-700">42,001,245条</p></div>
|
|
<div class="bg-red-50 rounded p-2"><p>表数量</p><p class="font-semibold text-red-700">45</p></div>
|
|
<div class="bg-red-50 rounded p-2"><p>当日新增预警</p><p class="font-semibold text-red-700">126条</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="p-5">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0"><i class="fas fa-clipboard-check text-2xl text-green-600"></i></div>
|
|
<div class="w-full">
|
|
<h3 class="text-lg font-semibold mb-1">督察问题数据库</h3>
|
|
<p class="text-sm text-gray-600 mb-3">问题处理跟踪</p>
|
|
<div class="grid grid-cols-3 gap-2 text-xs text-gray-600">
|
|
<div class="bg-green-50 rounded p-2"><p>数据量</p><p class="font-semibold text-green-700">98,004,331条</p></div>
|
|
<div class="bg-green-50 rounded p-2"><p>表数量</p><p class="font-semibold text-green-700">78</p></div>
|
|
<div class="bg-green-50 rounded p-2"><p>闭环率</p><p class="font-semibold text-green-700">92.4%</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="p-5">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0"><i class="fas fa-chart-pie text-2xl text-purple-600"></i></div>
|
|
<div class="w-full">
|
|
<h3 class="text-lg font-semibold mb-1">督查业务主题库</h3>
|
|
<p class="text-sm text-gray-600 mb-3">专题分析与主题研判数据</p>
|
|
<div class="grid grid-cols-3 gap-2 text-xs text-gray-600">
|
|
<div class="bg-purple-50 rounded p-2"><p>数据量</p><p class="font-semibold text-purple-700">27,650,842条</p></div>
|
|
<div class="bg-purple-50 rounded p-2"><p>表数量</p><p class="font-semibold text-purple-700">156</p></div>
|
|
<div class="bg-purple-50 rounded p-2"><p>主题模型</p><p class="font-semibold text-purple-700">34个</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="p-5">
|
|
<h3 class="text-base font-semibold mb-3">重点运行态势</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
|
|
<div class="bg-blue-50 rounded-lg p-4">
|
|
<div class="flex items-center justify-between text-sm"><span class="text-gray-600">实时写入吞吐</span><span class="font-semibold text-blue-700">12.8万条/分钟</span></div>
|
|
<div class="mt-2 w-full bg-blue-100 rounded-full h-2"><div class="bg-blue-600 h-2 rounded-full" style="width:78%"></div></div>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-4">
|
|
<div class="flex items-center justify-between text-sm"><span class="text-gray-600">数据校验通过率</span><span class="font-semibold text-green-700">98.7%</span></div>
|
|
<div class="mt-2 w-full bg-green-100 rounded-full h-2"><div class="bg-green-600 h-2 rounded-full" style="width:98%"></div></div>
|
|
</div>
|
|
<div class="bg-yellow-50 rounded-lg p-4">
|
|
<div class="flex items-center justify-between text-sm"><span class="text-gray-600">待处理异常任务</span><span class="font-semibold text-yellow-700">17条</span></div>
|
|
<div class="mt-2 text-xs text-gray-500">主要集中在预警模型分库字段映射与增量补偿队列。</div>
|
|
</div>
|
|
<div class="bg-indigo-50 rounded-lg p-4">
|
|
<div class="flex items-center justify-between text-sm"><span class="text-gray-600">资源利用率</span><span class="font-semibold text-indigo-700">CPU 63% / 内存 71%</span></div>
|
|
<div class="mt-2 text-xs text-gray-500">当前资源充足,支持高峰期专题查询并发访问。</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 数据预览模态框 -->
|
|
<div id="dataPreviewModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">数据预览</h3>
|
|
<button onclick="closeModal('dataPreviewModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<div class="data-preview">
|
|
<div class="preview-header">
|
|
<h4 id="dataPreviewTitle" class="font-medium">执法办案数据预览</h4>
|
|
<div class="flex space-x-2">
|
|
<button class="action-button">
|
|
<i class="fas fa-download"></i>下载CSV
|
|
</button>
|
|
<button class="action-button">
|
|
<i class="fas fa-file-excel"></i>导出Excel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2 px-3">案件编号</th>
|
|
<th class="text-left py-2 px-3">案件名称</th>
|
|
<th class="text-left py-2 px-3">涉及单位</th>
|
|
<th class="text-left py-2 px-3">案件类型</th>
|
|
<th class="text-left py-2 px-3">状态</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">202404150001</td>
|
|
<td class="py-2 px-3">张三故意伤害案</td>
|
|
<td class="py-2 px-3">合肥市公安局</td>
|
|
<td class="py-2 px-3">刑事案件</td>
|
|
<td class="py-2 px-3">已结案</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">202404150002</td>
|
|
<td class="py-2 px-3">李四交通违法案</td>
|
|
<td class="py-2 px-3">芜湖市公安局</td>
|
|
<td class="py-2 px-3">行政案件</td>
|
|
<td class="py-2 px-3">办理中</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新建数据源模态框 -->
|
|
<div id="dataSourceModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">新建数据源</h3>
|
|
<button onclick="closeModal('dataSourceModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<form class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">数据源名称</label>
|
|
<input type="text" class="w-full border rounded-lg px-3 py-2" placeholder="请输入数据源名称">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">数据源类型</label>
|
|
<select class="w-full border rounded-lg px-3 py-2" onchange="showDataSourceTypeOptions(this.value)">
|
|
<option value="">请选择类型</option>
|
|
<option value="api">API接口</option>
|
|
<option value="database">数据库连接</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- API接口配置选项 -->
|
|
<div id="apiOptions">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">接口地址</label>
|
|
<input type="text" class="w-full border rounded-lg px-3 py-2" placeholder="https://api.example.com">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">请求方法</label>
|
|
<select class="w-full border rounded-lg px-3 py-2">
|
|
<option>GET</option>
|
|
<option>POST</option>
|
|
<option>PUT</option>
|
|
<option>DELETE</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">认证方式</label>
|
|
<select class="w-full border rounded-lg px-3 py-2">
|
|
<option>无认证</option>
|
|
<option>Basic Auth</option>
|
|
<option>Bearer Token</option>
|
|
<option>OAuth 2.0</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据库配置选项 -->
|
|
<div id="databaseOptions" class="hidden">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">数据库类型</label>
|
|
<select class="w-full border rounded-lg px-3 py-2">
|
|
<option>MySQL</option>
|
|
<option>PostgreSQL</option>
|
|
<option>Oracle</option>
|
|
<option>SQL Server</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">主机地址</label>
|
|
<input type="text" class="w-full border rounded-lg px-3 py-2" placeholder="localhost">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">端口</label>
|
|
<input type="number" class="w-full border rounded-lg px-3 py-2" placeholder="3306">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">数据库名称</label>
|
|
<input type="text" class="w-full border rounded-lg px-3 py-2" placeholder="database_name">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">连接地址</label>
|
|
<input type="text" class="w-full border rounded-lg px-3 py-2" placeholder="请输入连接地址">
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
|
|
<input type="text" class="w-full border rounded-lg px-3 py-2">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
|
|
<input type="password" class="w-full border rounded-lg px-3 py-2">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">更新频率</label>
|
|
<select class="w-full border rounded-lg px-3 py-2">
|
|
<option>实时</option>
|
|
<option>每5分钟</option>
|
|
<option>每小时</option>
|
|
<option>每天</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">数据源描述</label>
|
|
<textarea class="w-full border rounded-lg px-3 py-2" rows="3" placeholder="请输入数据源描述"></textarea>
|
|
</div>
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="closeModal('dataSourceModal')" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
|
|
取消
|
|
</button>
|
|
<button type="button" class="btn-primary">
|
|
确认创建
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 接口故障分析模态框 -->
|
|
<div id="errorAnalysisModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">接口故障分析</h3>
|
|
<button onclick="closeModal('errorAnalysisModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<!-- 故障状态 -->
|
|
<div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-exclamation-triangle text-red-600 mr-3"></i>
|
|
<div>
|
|
<h4 class="font-semibold text-red-800">执法办案系统接口故障</h4>
|
|
<p class="text-sm text-red-600 mt-1">故障时间:2024-04-15 10:30:00</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 故障分析报告 -->
|
|
<div class="mb-6">
|
|
<h4 class="font-semibold mb-3">故障分析报告</h4>
|
|
<div class="space-y-4">
|
|
<div class="border rounded-lg p-4">
|
|
<h5 class="font-medium mb-2">故障原因</h5>
|
|
<p class="text-sm text-gray-600">数据库连接超时,可能是由于网络不稳定或数据库服务负载过高导致。</p>
|
|
</div>
|
|
<div class="border rounded-lg p-4">
|
|
<h5 class="font-medium mb-2">影响范围</h5>
|
|
<p class="text-sm text-gray-600">影响执法办案系统数据同步,新案件信息无法实时同步到督察平台。</p>
|
|
</div>
|
|
<div class="border rounded-lg p-4">
|
|
<h5 class="font-medium mb-2">解决方案</h5>
|
|
<p class="text-sm text-gray-600">
|
|
1. 检查数据库服务状态<br>
|
|
2. 优化数据库连接池配置<br>
|
|
3. 增加重试机制和超时设置<br>
|
|
4. 考虑使用消息队列进行异步同步
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据展示样例 -->
|
|
<div class="mb-6">
|
|
<h4 class="font-semibold mb-3">最近成功同步的数据样例</h4>
|
|
<div class="data-preview">
|
|
<div class="preview-header">
|
|
<h5 class="font-medium">执法办案数据样例(2024-04-15 09:30)</h5>
|
|
<span class="text-sm text-green-600">最后正常同步</span>
|
|
</div>
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2 px-3">案件编号</th>
|
|
<th class="text-left py-2 px-3">案件名称</th>
|
|
<th class="text-left py-2 px-3">涉及单位</th>
|
|
<th class="text-left py-2 px-3">案件类型</th>
|
|
<th class="text-left py-2 px-3">状态</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">202404150001</td>
|
|
<td class="py-2 px-3">张三故意伤害案</td>
|
|
<td class="py-2 px-3">合肥市公安局</td>
|
|
<td class="py-2 px-3">刑事案件</td>
|
|
<td class="py-2 px-3">已结案</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">202404150002</td>
|
|
<td class="py-2 px-3">李四交通违法案</td>
|
|
<td class="py-2 px-3">芜湖市公安局</td>
|
|
<td class="py-2 px-3">行政案件</td>
|
|
<td class="py-2 px-3">办理中</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新建标签模态框 -->
|
|
<div id="tagModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">新建数据分类标签</h3>
|
|
<button onclick="closeModal('tagModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">标签名称</label>
|
|
<input type="text" id="tagNameInput" class="w-full border rounded-lg px-3 py-2" placeholder="请输入标签名称">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">标签层级</label>
|
|
<select id="tagLevelSelect" onchange="syncTagParentUI()" class="w-full border rounded-lg px-3 py-2">
|
|
<option value="大类">大类</option>
|
|
<option value="中类">中类</option>
|
|
<option value="小类">小类</option>
|
|
</select>
|
|
</div>
|
|
<div id="tagParentRow" class="hidden space-y-3">
|
|
<div id="tagParentMidClassWrap" class="hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">父级大类</label>
|
|
<select id="tagParentMajorForMid" class="w-full border rounded-lg px-3 py-2">
|
|
<option value="">请选择</option>
|
|
<option>执法</option>
|
|
<option>交通</option>
|
|
<option>队伍</option>
|
|
</select>
|
|
</div>
|
|
<div id="tagParentSmallClassWrap" class="hidden space-y-3">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">父级大类</label>
|
|
<select id="tagParentMajorForSmall" onchange="syncTagMidOptionsForSmall()" class="w-full border rounded-lg px-3 py-2">
|
|
<option value="">请选择</option>
|
|
<option>执法</option>
|
|
<option>交通</option>
|
|
<option>队伍</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">父级中类</label>
|
|
<select id="tagParentMidForSmall" class="w-full border rounded-lg px-3 py-2">
|
|
<option value="">请先选择父级大类</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="closeModal('tagModal')" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
|
|
取消
|
|
</button>
|
|
<button type="button" class="btn-primary">保存标签</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新建抽取任务模态框 -->
|
|
<div id="extractionTaskModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">新建抽取任务</h3>
|
|
<button onclick="closeModal('extractionTaskModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<form class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">任务名称</label>
|
|
<input type="text" class="w-full border rounded-lg px-3 py-2" placeholder="请输入任务名称">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">抽取方式</label>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<button type="button" class="border rounded-lg p-3 hover:bg-blue-50 hover:border-blue-300" onclick="selectExtractionType('batch')">
|
|
<i class="fas fa-tasks mb-1"></i>
|
|
<p class="text-sm">批量抽取</p>
|
|
</button>
|
|
<button type="button" class="border rounded-lg p-3 hover:bg-blue-50 hover:border-blue-300" onclick="selectExtractionType('date')">
|
|
<i class="fas fa-calendar mb-1"></i>
|
|
<p class="text-sm">日期抽取</p>
|
|
</button>
|
|
<button type="button" class="border rounded-lg p-3 hover:bg-blue-50 hover:border-blue-300" onclick="selectExtractionType('condition')">
|
|
<i class="fas fa-filter mb-1"></i>
|
|
<p class="text-sm">条件抽取</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="batchExtractionOptions" class="hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">批量范围</label>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">开始日期</label>
|
|
<input type="date" class="w-full border rounded-lg px-3 py-2">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">结束日期</label>
|
|
<input type="date" class="w-full border rounded-lg px-3 py-2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="dateExtractionOptions" class="hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">指定日期</label>
|
|
<input type="date" class="w-full border rounded-lg px-3 py-2">
|
|
</div>
|
|
<div id="conditionExtractionOptions" class="hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">抽取条件</label>
|
|
<textarea class="w-full border rounded-lg px-3 py-2" rows="3" placeholder="例如:案件类型='刑事案件' AND 日期>='2024-01-01'"></textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">目标数据源</label>
|
|
<select class="w-full border rounded-lg px-3 py-2">
|
|
<option>执法办案系统</option>
|
|
<option>户政管理系统</option>
|
|
<option>交通管理系统</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">目标存储位置</label>
|
|
<select class="w-full border rounded-lg px-3 py-2">
|
|
<option>数据仓库-执法案件表</option>
|
|
<option>数据仓库-户政信息表</option>
|
|
<option>数据仓库-交通违法表</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">任务描述</label>
|
|
<textarea class="w-full border rounded-lg px-3 py-2" rows="2" placeholder="请输入任务描述"></textarea>
|
|
</div>
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="closeModal('extractionTaskModal')" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
|
|
取消
|
|
</button>
|
|
<button type="button" class="btn-primary">
|
|
创建任务
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据库结构查看模态框 -->
|
|
<div id="databaseStructureModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">数据库结构查看</h3>
|
|
<button onclick="closeModal('databaseStructureModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<div class="mb-4">
|
|
<h4 class="font-semibold mb-2" id="databaseName">执法案件数据库</h4>
|
|
<div class="flex flex-wrap gap-2 mb-3" id="databaseTagsInfo">
|
|
<span class="text-xs px-2 py-1 rounded bg-blue-100 text-blue-700">执法</span>
|
|
<span class="text-xs px-2 py-1 rounded bg-indigo-100 text-indigo-700">案件</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 mb-3">
|
|
记录数:<span class="font-semibold text-gray-800" id="databaseRecordCount">1.24亿条</span>
|
|
</div>
|
|
<div class="flex space-x-4 text-sm">
|
|
<button class="action-button">
|
|
<i class="fas fa-sync"></i>刷新
|
|
</button>
|
|
<button class="action-button">
|
|
<i class="fas fa-download"></i>导出结构
|
|
</button>
|
|
<button class="action-button">
|
|
<i class="fas fa-folder"></i>更新目录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表结构列表 -->
|
|
<div class="space-y-4">
|
|
<div class="border rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h5 class="font-medium">案件基本信息表</h5>
|
|
<span class="text-sm text-gray-500">156个字段</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 mb-3">
|
|
存储案件的基本信息,包括案件编号、案件名称、涉及单位、案件类型等关键字段
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">案件编号 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">案件名称 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">涉及单位 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">案件类型 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">案件状态 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">创建时间 (DATETIME)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h5 class="font-medium">当事人信息表</h5>
|
|
<span class="text-sm text-gray-500">89个字段</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 mb-3">
|
|
存储案件当事人的详细信息,包括姓名、身份证号、联系方式等
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">当事人姓名 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">身份证号 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">联系电话 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">地址 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">案件编号 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">角色 (VARCHAR)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h5 class="font-medium">处理结果表</h5>
|
|
<span class="text-sm text-gray-500">67个字段</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 mb-3">
|
|
存储案件的处理结果信息,包括处理决定、处理日期、执行情况等
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">处理决定 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">处理日期 (DATE)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">执行情况 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">案件编号 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">处理部门 (VARCHAR)</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded text-xs">执行日期 (DATE)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 权限信息模态框 -->
|
|
<div id="permissionModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">数据权限信息</h3>
|
|
<button onclick="closeModal('permissionModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<div class="mb-6">
|
|
<h4 class="font-semibold mb-3" id="permissionDatabaseName">执法案件数据库</h4>
|
|
<p class="text-sm text-gray-600 mb-4">
|
|
数据分类:不同角色可以查看不同的数据库表<br>
|
|
数据分级:不同角色可以查看不同的数据库字段
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 角色权限表 -->
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-3 px-4">角色</th>
|
|
<th class="text-left py-3 px-4">可访问表</th>
|
|
<th class="text-left py-3 px-4">可见字段</th>
|
|
<th class="text-left py-3 px-4">权限级别</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="table-row border-b">
|
|
<td class="py-3 px-4">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-user-shield text-blue-600 mr-2"></i>
|
|
<span>系统管理员</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">所有表</td>
|
|
<td class="py-3 px-4">所有字段</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">完全访问</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row border-b">
|
|
<td class="py-3 px-4">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-user-tie text-orange-600 mr-2"></i>
|
|
<span>督察总队领导</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">案件基本信息、处理结果</td>
|
|
<td class="py-3 px-4">关键字段(不含敏感信息)</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">受限访问</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="table-row border-b">
|
|
<td class="py-3 px-4">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-user text-gray-600 mr-2"></i>
|
|
<span>普通督察员</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">案件基本信息(本人负责)</td>
|
|
<td class="py-3 px-4">基本字段</td>
|
|
<td class="py-3 px-4">
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">基本访问</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 权限说明 -->
|
|
<div class="mt-6 bg-blue-50 rounded-lg p-4">
|
|
<h5 class="font-medium mb-2">
|
|
<i class="fas fa-info-circle mr-2 text-blue-600"></i>权限说明
|
|
</h5>
|
|
<ul class="text-sm text-gray-600 space-y-1">
|
|
<li>• 系统管理员拥有最高权限,可以访问所有数据</li>
|
|
<li>• 领导级别只能查看案件处理的关键信息,看不到当事人的详细联系方式</li>
|
|
<li>• 普通督察员只能查看自己负责的案件的基本信息</li>
|
|
<li>• 所有操作都有详细的日志记录</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 权限示例模态框 -->
|
|
<div id="permissionDemoModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">数据权限示例</h3>
|
|
<button onclick="closeModal('permissionDemoModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<div class="mb-6">
|
|
<h4 class="font-semibold mb-3">数据分类与分级示例</h4>
|
|
<p class="text-sm text-gray-600">
|
|
通过数据分类和数据分级实现精细化的数据权限控制,确保数据安全。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 数据分类示例 -->
|
|
<div class="mb-6">
|
|
<h5 class="font-medium mb-3">
|
|
<i class="fas fa-layer-group mr-2 text-blue-600"></i>数据分类示例
|
|
</h5>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="border rounded-lg p-4">
|
|
<h6 class="font-medium mb-2">督察总队领导</h6>
|
|
<ul class="text-sm text-gray-600 space-y-1">
|
|
<li>✓ 可以查看:督察案件信息表</li>
|
|
<li>✓ 可以查看:处理结果统计表</li>
|
|
<li>✓ 可以查看:队伍考核表</li>
|
|
<li>✗ 不能查看:个人隐私信息表</li>
|
|
<li>✗ 不能查看:内部敏感数据表</li>
|
|
</ul>
|
|
</div>
|
|
<div class="border rounded-lg p-4">
|
|
<h6 class="font-medium mb-2">各地市督察员</h6>
|
|
<ul class="text-sm text-gray-600 space-y-1">
|
|
<li>✓ 可以查看:本地区案件信息</li>
|
|
<li>✓ 可以查看:本地区处理结果</li>
|
|
<li>✗ 不能查看:其他地区案件</li>
|
|
<li>✗ 不能查看:敏感统计数据</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据分级示例 -->
|
|
<div class="mb-6">
|
|
<h5 class="font-medium mb-3">
|
|
<i class="fas fa-shield-alt mr-2 text-green-600"></i>数据分级示例
|
|
</h5>
|
|
<div class="border rounded-lg p-4">
|
|
<h6 class="font-medium mb-3">案件基本信息表</h6>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<p class="text-sm font-medium mb-1">公开字段(所有角色可见)</p>
|
|
<div class="bg-green-50 px-3 py-2 rounded text-sm">
|
|
案件编号、案件名称、案件类型、处理状态
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium mb-1">内部字段(领导以上可见)</p>
|
|
<div class="bg-yellow-50 px-3 py-2 rounded text-sm">
|
|
涉及单位、承办部门、处理建议
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium mb-1">敏感字段(仅管理员可见)</p>
|
|
<div class="bg-red-50 px-3 py-2 rounded text-sm">
|
|
当事人身份证号、详细联系方式、家庭住址
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 权限控制效果 -->
|
|
<div class="bg-blue-50 rounded-lg p-4">
|
|
<h5 class="font-medium mb-2">
|
|
<i class="fas fa-lock mr-2 text-blue-600"></i>权限控制效果
|
|
</h5>
|
|
<div class="text-sm text-gray-600 space-y-2">
|
|
<p>当不同角色查看同一张表时,系统会根据权限自动过滤字段:</p>
|
|
<div class="bg-white rounded p-3 mt-2">
|
|
<p class="font-medium mb-1">系统管理员看到的表:</p>
|
|
<p class="text-xs bg-gray-100 p-2 rounded">案件编号 | 案件名称 | 案件类型 | 涉及单位 | 承办部门 | 处理建议 | 当事人身份证号 | 联系方式 | 家庭住址 | 处理状态</p>
|
|
|
|
<p class="font-medium mb-1 mt-2">督察总队领导看到的表:</p>
|
|
<p class="text-xs bg-gray-100 p-2 rounded">案件编号 | 案件名称 | 案件类型 | 涉及单位 | 承办部门 | 处理建议 | 处理状态</p>
|
|
|
|
<p class="font-medium mb-1 mt-2">普通督察员看到的表:</p>
|
|
<p class="text-xs bg-gray-100 p-2 rounded">案件编号 | 案件名称 | 案件类型 | 处理状态</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 批量导入模态框 -->
|
|
<div id="batchImportModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">批量导入数据资产</h3>
|
|
<button onclick="closeModal('batchImportModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<!-- 支持格式说明 -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
|
<h4 class="font-medium text-blue-800 mb-2">
|
|
<i class="fas fa-info-circle mr-2"></i>支持的文件格式
|
|
</h4>
|
|
<p class="text-sm text-blue-600">支持 .xlsx、.xls、.csv 格式的文件,文件大小不超过 10MB</p>
|
|
</div>
|
|
|
|
<!-- 拖拽上传区域 -->
|
|
<div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6 hover:border-blue-400 transition cursor-pointer">
|
|
<i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
|
|
<p class="text-lg font-medium text-gray-600 mb-2">拖拽文件到此处或点击上传</p>
|
|
<p class="text-sm text-gray-500">支持 Excel (.xlsx, .xls) 和 CSV (.csv) 格式</p>
|
|
<input type="file" id="fileInput" class="hidden" accept=".xlsx,.xls,.csv" multiple onchange="handleFileSelect(event)">
|
|
</div>
|
|
|
|
<!-- 文件列表 -->
|
|
<div id="fileList" class="space-y-3 mb-6">
|
|
<!-- 文件项将在这里动态添加 -->
|
|
</div>
|
|
|
|
<!-- 导入模板下载 -->
|
|
<div class="border rounded-lg p-4 mb-6">
|
|
<h4 class="font-medium mb-3">资产导入模板</h4>
|
|
<div class="flex flex-wrap gap-3">
|
|
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
|
|
<i class="fas fa-file-excel mr-2 text-green-600"></i>下载 Excel 模板
|
|
</button>
|
|
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
|
|
<i class="fas fa-file-csv mr-2 text-blue-600"></i>下载 CSV 模板
|
|
</button>
|
|
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
|
|
<i class="fas fa-question-circle mr-2"></i>导入说明
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导入预览 -->
|
|
<div id="importPreview" class="hidden">
|
|
<h4 class="font-medium mb-3">导入预览</h4>
|
|
<div class="bg-gray-50 rounded-lg p-4 max-h-60 overflow-y-auto">
|
|
<table class="w-full text-sm">
|
|
<thead id="previewTableHead">
|
|
<!-- 动态生成表头 -->
|
|
</thead>
|
|
<tbody id="previewTableBody">
|
|
<!-- 动态生成数据 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="closeModal('batchImportModal')" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
|
|
取消
|
|
</button>
|
|
<button type="button" onclick="startImport()" class="btn-primary">
|
|
开始导入
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 批量导出模态框 -->
|
|
<div id="batchExportModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">批量导出数据资产</h3>
|
|
<button onclick="closeModal('batchExportModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<!-- 步骤选择 -->
|
|
<div class="mb-6">
|
|
<h4 class="font-medium mb-3">选择导出步骤</h4>
|
|
<div class="space-y-4">
|
|
<!-- 第一步:选择范围 -->
|
|
<div class="border rounded-lg p-4">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center mr-3 flex-shrink-0">1</div>
|
|
<h5 class="font-medium">选择导出范围</h5>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label class="text-sm text-gray-600 mb-2 block">所属数据库</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2" checked>
|
|
<span>业务数据库</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2" checked>
|
|
<span>预警数据库</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2">
|
|
<span>问题数据库</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2">
|
|
<span>业务主题库</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600 mb-2 block">时间范围</label>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="text-xs text-gray-500">开始日期</label>
|
|
<input type="date" class="w-full border rounded px-3 py-2" value="2024-01-01">
|
|
</div>
|
|
<div>
|
|
<label class="text-xs text-gray-500">结束日期</label>
|
|
<input type="date" class="w-full border rounded px-3 py-2" value="2024-04-15">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第二步:选择字段 -->
|
|
<div class="border rounded-lg p-4">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center mr-3 flex-shrink-0">2</div>
|
|
<h5 class="font-medium">选择导出字段</h5>
|
|
</div>
|
|
<div>
|
|
<div class="mb-3">
|
|
<label class="flex items-center mb-2">
|
|
<input type="checkbox" id="selectAllFields" onchange="toggleAllFields()" class="mr-2" checked>
|
|
<span class="text-sm">全选字段</span>
|
|
</label>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-2" id="fieldList">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2" checked>
|
|
<span class="text-sm">资产名称</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2" checked>
|
|
<span class="text-sm">所属数据库</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2" checked>
|
|
<span class="text-sm">数据量</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2" checked>
|
|
<span class="text-sm">分类标签</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2" checked>
|
|
<span class="text-sm">访问权限</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2">
|
|
<span class="text-sm">最后更新时间</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第三步:二次加工配置 -->
|
|
<div class="border rounded-lg p-4">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center mr-3 flex-shrink-0">3</div>
|
|
<h5 class="font-medium">二次加工配置</h5>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="text-sm text-gray-600 mb-2 block">数据排序</label>
|
|
<select class="w-full border rounded px-3 py-2">
|
|
<option>按资产名称(升序)</option>
|
|
<option>按资产名称(降序)</option>
|
|
<option>按更新时间(最新)</option>
|
|
<option>按更新时间(最早)</option>
|
|
<option>按数据量(最多条)</option>
|
|
<option>按数据量(最少条)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600 mb-2 block">数据筛选</label>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="text-xs text-gray-500">访问权限筛选</label>
|
|
<select class="w-full border rounded px-3 py-2">
|
|
<option>全部权限</option>
|
|
<option>仅内部使用</option>
|
|
<option>仅受限访问</option>
|
|
<option>仅涉密访问</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-xs text-gray-500">分类标签筛选</label>
|
|
<select class="w-full border rounded px-3 py-2">
|
|
<option>全部标签</option>
|
|
<option>执法</option>
|
|
<option>预警</option>
|
|
<option>问题处置</option>
|
|
<option>业务分析</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600 mb-2 block">数据分组统计</label>
|
|
<div class="space-y-2">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2">
|
|
<span class="text-sm">按访问权限统计数量</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2">
|
|
<span class="text-sm">按所属数据库统计数据量</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="mr-2">
|
|
<span class="text-sm">按分类标签统计资产数量</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导出格式选择 -->
|
|
<div class="mb-6">
|
|
<h4 class="font-medium mb-3">导出格式</h4>
|
|
<div class="flex gap-3">
|
|
<button class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
|
|
<i class="fas fa-file-excel mr-2"></i>Excel (.xlsx)
|
|
</button>
|
|
<button class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
|
|
<i class="fas fa-file-csv mr-2"></i>CSV (.csv)
|
|
</button>
|
|
<button class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
|
|
<i class="fas fa-file-code mr-2"></i>JSON (.json)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="closeModal('batchExportModal')" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
|
|
取消
|
|
</button>
|
|
<button type="button" onclick="startExport()" class="btn-primary">
|
|
开始导出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据源详情模态框 -->
|
|
<div id="dataSourceDetailsModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">数据源详情</h3>
|
|
<button onclick="closeModal('dataSourceDetailsModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 故障报告区域 - 置顶显示 -->
|
|
<div id="errorReportSection" class="bg-red-50 border-b border-red-200 p-4 hidden">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-exclamation-triangle text-red-600 mr-3 text-xl"></i>
|
|
<div>
|
|
<h4 class="font-semibold text-red-800">数据源故障报告</h4>
|
|
<p class="text-sm text-red-600 mt-1">故障时间:2024-04-15 10:30:00 | 影响等级:严重</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="showPinnedErrorReport('执法办案系统')" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
|
|
<i class="fas fa-eye mr-2"></i>查看详情
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 220px);">
|
|
<!-- 基本信息 -->
|
|
<div class="mb-6">
|
|
<h4 class="font-semibold mb-4">基本信息</h4>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="text-sm text-gray-600">数据源名称</label>
|
|
<p class="font-medium" id="detailsName">-</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600">类型</label>
|
|
<p class="font-medium" id="detailsType">-</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600">状态</label>
|
|
<p class="font-medium" id="detailsStatus">-</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600">更新频率</label>
|
|
<p class="font-medium" id="detailsFrequency">-</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600">连接地址</label>
|
|
<p class="font-medium text-sm break-all" id="detailsUrl">-</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600">创建时间</label>
|
|
<p class="font-medium" id="detailsCreateTime">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据库信息 -->
|
|
<div class="mb-6">
|
|
<h4 class="font-semibold mb-4">数据库信息</h4>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="text-sm text-gray-600">数据库类型</label>
|
|
<p class="font-medium" id="dbType">-</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600">数据库名称</label>
|
|
<p class="font-medium" id="dbName">-</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600">表数量</label>
|
|
<p class="font-medium" id="dbTableCount">-</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm text-gray-600">总数据量</label>
|
|
<p class="font-medium" id="dbTotalSize">-</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表列表 -->
|
|
<div class="mt-4">
|
|
<h5 class="font-medium mb-3">主要表结构</h5>
|
|
<div class="space-y-2">
|
|
<div class="bg-white rounded p-3 border">
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-medium">案件基本信息表</span>
|
|
<span class="text-sm text-gray-500">156个字段</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded p-3 border">
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-medium">当事人信息表</span>
|
|
<span class="text-sm text-gray-500">89个字段</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded p-3 border">
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-medium">处理结果表</span>
|
|
<span class="text-sm text-gray-500">67个字段</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 统计信息 -->
|
|
<div class="mb-6">
|
|
<h4 class="font-semibold mb-4">统计信息</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div class="bg-blue-50 rounded-lg p-4">
|
|
<p class="text-sm text-gray-600">今日调用次数</p>
|
|
<p class="text-2xl font-bold text-blue-600" id="statsCallCount">-</p>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-4">
|
|
<p class="text-sm text-gray-600">平均响应时间</p>
|
|
<p class="text-2xl font-bold text-green-600" id="statsAvgTime">-</p>
|
|
</div>
|
|
<div class="bg-orange-50 rounded-lg p-4">
|
|
<p class="text-sm text-gray-600">成功率</p>
|
|
<p class="text-2xl font-bold text-orange-600" id="statsSuccessRate">-</p>
|
|
</div>
|
|
<div class="bg-purple-50 rounded-lg p-4">
|
|
<p class="text-sm text-gray-600">数据增量</p>
|
|
<p class="text-2xl font-bold text-purple-600" id="statsDataIncrement">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="closeModal('dataSourceDetailsModal')" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
|
|
关闭
|
|
</button>
|
|
<button type="button" class="btn-primary">
|
|
编辑数据源
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 抽取执行批次模态框 -->
|
|
<div id="extractRunsModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-5xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">抽取任务执行列表</h3>
|
|
<button onclick="closeModal('extractRunsModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<div class="mb-4 text-sm text-gray-600" id="extractRunsTitle">任务:-</div>
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2 px-3">执行批次</th>
|
|
<th class="text-left py-2 px-3">开始时间</th>
|
|
<th class="text-left py-2 px-3">结束时间</th>
|
|
<th class="text-left py-2 px-3">抽取记录数</th>
|
|
<th class="text-left py-2 px-3">状态</th>
|
|
<th class="text-left py-2 px-3">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">RUN-20260415-001</td>
|
|
<td class="py-2 px-3">10:00:01</td>
|
|
<td class="py-2 px-3">10:02:30</td>
|
|
<td class="py-2 px-3">12,436</td>
|
|
<td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td>
|
|
<td class="py-2 px-3">
|
|
<button onclick="showExtractionSummary('RUN-20260415-001')" class="text-blue-600 hover:text-blue-800">
|
|
<i class="fas fa-eye mr-1"></i>详情
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">RUN-20260414-003</td>
|
|
<td class="py-2 px-3">09:30:20</td>
|
|
<td class="py-2 px-3">09:33:11</td>
|
|
<td class="py-2 px-3">11,902</td>
|
|
<td class="py-2 px-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded">成功</span></td>
|
|
<td class="py-2 px-3">
|
|
<button onclick="showExtractionSummary('RUN-20260414-003')" class="text-blue-600 hover:text-blue-800">
|
|
<i class="fas fa-eye mr-1"></i>详情
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 抽取数据汇总模态框 -->
|
|
<div id="extractSummaryModal" class="modal">
|
|
<div class="bg-white rounded-lg max-w-5xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h3 class="text-xl font-semibold">抽取数据汇总</h3>
|
|
<button onclick="closeModal('extractSummaryModal')" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 140px);">
|
|
<div class="mb-4 text-sm text-gray-600" id="extractSummaryTitle">批次:-</div>
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left py-2 px-3">数据表</th>
|
|
<th class="text-left py-2 px-3">抽取条数</th>
|
|
<th class="text-left py-2 px-3">成功条数</th>
|
|
<th class="text-left py-2 px-3">失败条数</th>
|
|
<th class="text-left py-2 px-3">校验结果</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">案件主表</td>
|
|
<td class="py-2 px-3">8,000</td>
|
|
<td class="py-2 px-3">7,998</td>
|
|
<td class="py-2 px-3">2</td>
|
|
<td class="py-2 px-3">通过(2条缺失字段已入异常队列)</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">当事人表</td>
|
|
<td class="py-2 px-3">3,200</td>
|
|
<td class="py-2 px-3">3,200</td>
|
|
<td class="py-2 px-3">0</td>
|
|
<td class="py-2 px-3">通过</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">处理结果表</td>
|
|
<td class="py-2 px-3">1,236</td>
|
|
<td class="py-2 px-3">1,236</td>
|
|
<td class="py-2 px-3">0</td>
|
|
<td class="py-2 px-3">通过</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 页面切换功能
|
|
function switchMainMenu(menuName, el) {
|
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
|
|
document.querySelectorAll('.sidebar-nav-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
|
|
const panel = document.getElementById(menuName);
|
|
if (panel) panel.classList.add('active');
|
|
|
|
if (menuName === 'data-assets') {
|
|
switchAssetTab('list');
|
|
}
|
|
|
|
if (el) el.classList.add('active');
|
|
|
|
const titles = {
|
|
'data-channel': '数据通道',
|
|
'data-convergence': '数据汇聚',
|
|
'data-assets': '数据资产',
|
|
'specialized-apps': '专题应用'
|
|
};
|
|
const bc = document.getElementById('breadcrumbCurrent');
|
|
if (bc && titles[menuName]) bc.textContent = titles[menuName];
|
|
}
|
|
|
|
function navigateToMenu(menuName) {
|
|
const navBtn = document.querySelector('.sidebar-nav-item[onclick*="' + menuName + '"]');
|
|
switchMainMenu(menuName, navBtn || null);
|
|
}
|
|
|
|
function navigateCurrentMenu() {
|
|
const bc = document.getElementById('breadcrumbCurrent');
|
|
if (!bc) return;
|
|
const text = bc.textContent.trim();
|
|
const map = {
|
|
'数据通道': 'data-channel',
|
|
'数据汇聚': 'data-convergence',
|
|
'数据资产': 'data-assets',
|
|
'专题应用': 'specialized-apps'
|
|
};
|
|
const menuName = map[text] || 'data-channel';
|
|
navigateToMenu(menuName);
|
|
}
|
|
|
|
// 模态框控制
|
|
function closeModal(modalId) {
|
|
document.getElementById(modalId).classList.remove('active');
|
|
}
|
|
|
|
// 数据源模态框
|
|
function openDataSourceModal() {
|
|
document.getElementById('dataSourceModal').classList.add('active');
|
|
}
|
|
|
|
// 接口故障分析
|
|
function showErrorSample(sourceName) {
|
|
document.getElementById('errorAnalysisModal').classList.add('active');
|
|
}
|
|
|
|
// 从数据源详情中置顶查看故障报告
|
|
function showPinnedErrorReport(sourceName) {
|
|
closeModal('dataSourceDetailsModal');
|
|
setTimeout(() => {
|
|
showErrorSample(sourceName);
|
|
}, 0);
|
|
}
|
|
|
|
// 抽取任务模态框
|
|
function openExtractionTaskModal() {
|
|
document.getElementById('extractionTaskModal').classList.add('active');
|
|
}
|
|
|
|
// 选择抽取方式
|
|
function selectExtractionType(type) {
|
|
// 隐藏所有选项
|
|
document.getElementById('batchExtractionOptions').classList.add('hidden');
|
|
document.getElementById('dateExtractionOptions').classList.add('hidden');
|
|
document.getElementById('conditionExtractionOptions').classList.add('hidden');
|
|
|
|
// 移除所有按钮的选中样式
|
|
document.querySelectorAll('[onclick^="selectExtractionType"]').forEach(btn => {
|
|
btn.classList.remove('bg-blue-50', 'border-blue-300');
|
|
});
|
|
|
|
// 显示选中的选项
|
|
if (type === 'batch') {
|
|
document.getElementById('batchExtractionOptions').classList.remove('hidden');
|
|
} else if (type === 'date') {
|
|
document.getElementById('dateExtractionOptions').classList.remove('hidden');
|
|
} else if (type === 'condition') {
|
|
document.getElementById('conditionExtractionOptions').classList.remove('hidden');
|
|
}
|
|
|
|
// 添加选中样式
|
|
event.target.closest('button').classList.add('bg-blue-50', 'border-blue-300');
|
|
}
|
|
|
|
// 显示数据库结构
|
|
function showDatabaseStructure(databaseName) {
|
|
document.getElementById('databaseName').textContent = databaseName + ' - 表结构';
|
|
const dbMeta = {
|
|
'执法案件数据库': { tags: ['执法', '案件'], count: '1.24亿条' },
|
|
'户籍信息数据库': { tags: ['人口', '隐私敏感'], count: '8600万条' },
|
|
'交通违法数据库': { tags: ['交通', '违法记录'], count: '1.92亿条' },
|
|
'警情事件数据库': { tags: ['执法', '警情'], count: '7300万条' },
|
|
'预警模型数据库': { tags: ['预警', '涉密'], count: '4200万条' },
|
|
'督办问题数据库': { tags: ['问题处置', '闭环'], count: '9800万条' },
|
|
'民意评价数据库': { tags: ['民意', '隐私'], count: '3600万条' },
|
|
'语音督查数据库': { tags: ['语音', '受限'], count: '2500万条' },
|
|
'执法档案数据库': { tags: ['档案', '执法'], count: '2.46亿条' }
|
|
};
|
|
const meta = dbMeta[databaseName] || { tags: ['未分类'], count: '--' };
|
|
const tagsWrap = document.getElementById('databaseTagsInfo');
|
|
const countEl = document.getElementById('databaseRecordCount');
|
|
if (tagsWrap) {
|
|
tagsWrap.innerHTML = meta.tags.map(tag =>
|
|
`<span class="text-xs px-2 py-1 rounded bg-blue-100 text-blue-700">${tag}</span>`
|
|
).join('');
|
|
}
|
|
if (countEl) countEl.textContent = meta.count;
|
|
document.getElementById('databaseStructureModal').classList.add('active');
|
|
}
|
|
|
|
// 显示权限信息
|
|
function showPermissionInfo(databaseName) {
|
|
document.getElementById('permissionDatabaseName').textContent = databaseName;
|
|
document.getElementById('permissionModal').classList.add('active');
|
|
}
|
|
|
|
// 数据资产列表筛选(标签 + 访问权限 + 名称搜索)
|
|
function filterAssetRows() {
|
|
const keyword = (document.getElementById('assetSearchInput')?.value || '').trim().toLowerCase();
|
|
const tagVal = (document.getElementById('assetTagFilter')?.value || '').trim();
|
|
const permVal = (document.getElementById('assetPermFilter')?.value || '').trim();
|
|
document.querySelectorAll('#assetTableBody .asset-row').forEach(row => {
|
|
const name = (row.getAttribute('data-name') || '').toLowerCase();
|
|
const tags = row.getAttribute('data-tags') || '';
|
|
const perm = row.getAttribute('data-permission') || '';
|
|
const hitKeyword = !keyword || name.includes(keyword);
|
|
const hitTag = !tagVal || tags.includes(tagVal);
|
|
const hitPerm = !permVal || perm === permVal;
|
|
row.style.display = (hitKeyword && hitTag && hitPerm) ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
function resetAssetFilters() {
|
|
const keywordEl = document.getElementById('assetSearchInput');
|
|
const tagEl = document.getElementById('assetTagFilter');
|
|
const permEl = document.getElementById('assetPermFilter');
|
|
if (keywordEl) keywordEl.value = '';
|
|
if (tagEl) tagEl.value = '';
|
|
if (permEl) permEl.value = '';
|
|
filterAssetRows();
|
|
}
|
|
|
|
// 数据资产列表查看表数据
|
|
function showAssetTableData(tableName) {
|
|
const title = document.getElementById('assetPreviewPanelTitle');
|
|
if (title) title.textContent = tableName + ' 数据预览';
|
|
const body = document.getElementById('assetPreviewBody');
|
|
if (body) {
|
|
let rows = '';
|
|
for (let i = 1; i <= 20; i += 1) {
|
|
const suffix = String(i).padStart(3, '0');
|
|
const letterA = String.fromCharCode(64 + ((i % 26) || 26));
|
|
const letterB = String.fromCharCode(90 - ((i - 1) % 26));
|
|
const mm = String(30 - i).padStart(2, '0');
|
|
rows += `<tr class="border-b"><td class="py-2 px-3">${i}</td><td class="py-2 px-3">${tableName}-${suffix}</td><td class="py-2 px-3">示例值-${letterA}</td><td class="py-2 px-3">示例值-${letterB}</td><td class="py-2 px-3">2024-04-17 10:${mm}</td></tr>`;
|
|
}
|
|
body.innerHTML = rows;
|
|
}
|
|
document.querySelectorAll('#data-assets .asset-main-only').forEach(el => el.classList.add('hidden'));
|
|
document.getElementById('assetPreviewPanel').classList.remove('hidden');
|
|
}
|
|
|
|
function backToAssetListPage() {
|
|
document.getElementById('assetPreviewPanel').classList.add('hidden');
|
|
document.querySelectorAll('#data-assets .asset-main-only').forEach(el => el.classList.remove('hidden'));
|
|
}
|
|
|
|
// 显示权限示例
|
|
function showPermissionDemo() {
|
|
document.getElementById('permissionDemoModal').classList.add('active');
|
|
}
|
|
|
|
// 数据资产页签切换
|
|
function switchAssetTab(tab) {
|
|
const assetRoot = document.getElementById('data-assets');
|
|
const listEls = assetRoot ? assetRoot.querySelectorAll('.asset-list-only') : [];
|
|
const tagPane = document.getElementById('assetTagPane');
|
|
const listBtn = document.getElementById('assetListTabBtn');
|
|
const tagBtn = document.getElementById('assetTagTabBtn');
|
|
const previewPanel = document.getElementById('assetPreviewPanel');
|
|
|
|
if (tab === 'tag') {
|
|
listEls.forEach(el => el.classList.add('hidden'));
|
|
tagPane.classList.remove('hidden');
|
|
listBtn.classList.remove('active');
|
|
tagBtn.classList.add('active');
|
|
} else {
|
|
listEls.forEach(el => el.classList.remove('hidden'));
|
|
if (previewPanel) previewPanel.classList.add('hidden');
|
|
document.querySelectorAll('#data-assets .asset-main-only').forEach(el => el.classList.remove('hidden'));
|
|
tagPane.classList.add('hidden');
|
|
listBtn.classList.add('active');
|
|
tagBtn.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
switchAssetTab('list');
|
|
const collapsed = localStorage.getItem('dc_sidebar_collapsed') === '1';
|
|
if (collapsed) {
|
|
document.body.classList.add('sidebar-collapsed');
|
|
}
|
|
updateSidebarToggleIcon();
|
|
});
|
|
|
|
function updateSidebarToggleIcon() {
|
|
const icon = document.getElementById('sidebarToggleIcon');
|
|
const btn = document.getElementById('sidebarToggleBtn');
|
|
if (!icon) return;
|
|
const collapsed = document.body.classList.contains('sidebar-collapsed');
|
|
icon.className = collapsed ? 'fas fa-angles-right text-sm' : 'fas fa-angles-left text-sm';
|
|
if (btn) {
|
|
btn.title = collapsed ? '展开菜单' : '收起菜单';
|
|
btn.setAttribute('aria-label', collapsed ? '展开左侧菜单' : '收起左侧菜单');
|
|
}
|
|
}
|
|
|
|
function toggleSidebar() {
|
|
const collapsed = document.body.classList.toggle('sidebar-collapsed');
|
|
localStorage.setItem('dc_sidebar_collapsed', collapsed ? '1' : '0');
|
|
updateSidebarToggleIcon();
|
|
}
|
|
|
|
// 打开新建标签弹窗
|
|
function openTagModal() {
|
|
document.getElementById('tagModal').classList.add('active');
|
|
const level = document.getElementById('tagLevelSelect');
|
|
if (level) level.value = '大类';
|
|
const majorMid = document.getElementById('tagParentMajorForMid');
|
|
if (majorMid) majorMid.value = '';
|
|
const majorSm = document.getElementById('tagParentMajorForSmall');
|
|
if (majorSm) majorSm.value = '';
|
|
syncTagParentUI();
|
|
syncTagMidOptionsForSmall();
|
|
}
|
|
|
|
function syncTagMidOptionsForSmall() {
|
|
const majorSel = document.getElementById('tagParentMajorForSmall');
|
|
const midSel = document.getElementById('tagParentMidForSmall');
|
|
if (!majorSel || !midSel) return;
|
|
const map = {
|
|
'执法': ['警情', '案件'],
|
|
'交通': ['违法记录', '车辆信息'],
|
|
'队伍': ['人员管理']
|
|
};
|
|
const major = majorSel.value;
|
|
midSel.innerHTML = '';
|
|
const placeholder = document.createElement('option');
|
|
placeholder.value = '';
|
|
placeholder.textContent = major ? '请选择' : '请先选择父级大类';
|
|
midSel.appendChild(placeholder);
|
|
if (major && map[major]) {
|
|
map[major].forEach(function (name) {
|
|
const o = document.createElement('option');
|
|
o.value = name;
|
|
o.textContent = name;
|
|
midSel.appendChild(o);
|
|
});
|
|
}
|
|
}
|
|
|
|
function syncTagParentUI() {
|
|
const levelEl = document.getElementById('tagLevelSelect');
|
|
const parentRow = document.getElementById('tagParentRow');
|
|
const midClassWrap = document.getElementById('tagParentMidClassWrap');
|
|
const smallClassWrap = document.getElementById('tagParentSmallClassWrap');
|
|
if (!levelEl || !parentRow || !midClassWrap || !smallClassWrap) return;
|
|
|
|
const level = levelEl.value;
|
|
midClassWrap.classList.add('hidden');
|
|
smallClassWrap.classList.add('hidden');
|
|
|
|
if (level === '大类') {
|
|
parentRow.classList.add('hidden');
|
|
} else if (level === '中类') {
|
|
parentRow.classList.remove('hidden');
|
|
midClassWrap.classList.remove('hidden');
|
|
} else if (level === '小类') {
|
|
parentRow.classList.remove('hidden');
|
|
smallClassWrap.classList.remove('hidden');
|
|
syncTagMidOptionsForSmall();
|
|
}
|
|
}
|
|
|
|
// 中类点击展示/收起对应小类
|
|
function toggleMidCategory(button, targetId) {
|
|
const wrap = button.closest('.border.rounded-xl.p-4');
|
|
if (!wrap) return;
|
|
const target = document.getElementById(targetId);
|
|
if (!target) return;
|
|
const wasHidden = target.classList.contains('hidden');
|
|
wrap.querySelectorAll('[id^="mid-"]').forEach(el => el.classList.add('hidden'));
|
|
wrap.querySelectorAll('button[onclick^="toggleMidCategory"]').forEach(btn => {
|
|
btn.classList.remove('bg-blue-100', 'bg-green-100', 'bg-purple-100', 'font-semibold');
|
|
});
|
|
if (wasHidden) {
|
|
target.classList.remove('hidden');
|
|
button.classList.add('font-semibold');
|
|
if (button.className.includes('text-blue-700')) button.classList.add('bg-blue-100');
|
|
if (button.className.includes('text-green-700')) button.classList.add('bg-green-100');
|
|
if (button.className.includes('text-purple-700')) button.classList.add('bg-purple-100');
|
|
}
|
|
}
|
|
|
|
// 查看抽取执行批次
|
|
function showExtractionRuns(taskName) {
|
|
document.getElementById('extractRunsTitle').textContent = `任务:${taskName}`;
|
|
document.getElementById('extractRunsModal').classList.add('active');
|
|
}
|
|
|
|
// 查看抽取数据汇总
|
|
function showExtractionSummary(runId) {
|
|
document.getElementById('extractSummaryTitle').textContent = `批次:${runId}`;
|
|
document.getElementById('extractSummaryModal').classList.add('active');
|
|
}
|
|
|
|
// 数据汇聚:页面内展示执行列表
|
|
function showExtractionRunsPage(taskName) {
|
|
document.getElementById('convergenceRunsTitle').textContent = `任务执行列表:${taskName}`;
|
|
document.getElementById('convergenceMainPanel').classList.add('hidden');
|
|
document.getElementById('convergenceSummaryPanel').classList.add('hidden');
|
|
document.getElementById('convergenceRunsPanel').classList.remove('hidden');
|
|
}
|
|
|
|
// 数据汇聚:页面内展示抽取汇总
|
|
function showExtractionSummaryPage(runId) {
|
|
document.getElementById('convergenceSummaryTitle').textContent = `抽取数据汇总:${runId}`;
|
|
document.getElementById('convergenceRunsPanel').classList.add('hidden');
|
|
document.getElementById('convergenceSummaryPanel').classList.remove('hidden');
|
|
}
|
|
|
|
function backToConvergenceMain() {
|
|
document.getElementById('convergenceRunsPanel').classList.add('hidden');
|
|
document.getElementById('convergenceSummaryPanel').classList.add('hidden');
|
|
document.getElementById('convergenceMainPanel').classList.remove('hidden');
|
|
}
|
|
|
|
function backToConvergenceRuns() {
|
|
document.getElementById('convergenceSummaryPanel').classList.add('hidden');
|
|
document.getElementById('convergenceRunsPanel').classList.remove('hidden');
|
|
}
|
|
|
|
// 根据数据源类型显示不同的配置选项
|
|
function showDataSourceTypeOptions(type) {
|
|
const apiOptions = document.getElementById('apiOptions');
|
|
const databaseOptions = document.getElementById('databaseOptions');
|
|
|
|
if (type === 'api') {
|
|
apiOptions.classList.remove('hidden');
|
|
databaseOptions.classList.add('hidden');
|
|
} else if (type === 'database') {
|
|
apiOptions.classList.add('hidden');
|
|
databaseOptions.classList.remove('hidden');
|
|
} else {
|
|
apiOptions.classList.add('hidden');
|
|
databaseOptions.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
|
|
// 返回上一级
|
|
function goBack() {
|
|
// 实际项目中应该使用路由历史
|
|
window.history.back();
|
|
}
|
|
|
|
// 面包屑导航
|
|
function navigateTo(page) {
|
|
console.log('导航到:' + page);
|
|
// 实际项目中应该使用路由导航
|
|
}
|
|
|
|
// 数据源状态筛选
|
|
function filterByStatus(status) {
|
|
// 更新按钮样式
|
|
document.querySelectorAll('.flex.gap-3 button').forEach(btn => {
|
|
btn.classList.remove('bg-blue-600', 'text-white');
|
|
btn.classList.add('bg-gray-100', 'text-gray-700');
|
|
});
|
|
|
|
if (status !== 'all') {
|
|
event.target.classList.remove('bg-gray-100', 'text-gray-700');
|
|
event.target.classList.add('bg-blue-600', 'text-white');
|
|
} else {
|
|
event.target.classList.remove('bg-gray-100', 'text-gray-700');
|
|
event.target.classList.add('bg-blue-600', 'text-white');
|
|
}
|
|
|
|
// 实际筛选逻辑
|
|
console.log('筛选状态:' + status);
|
|
}
|
|
|
|
// 切换数据源状态
|
|
function toggleDataSourceStatus(sourceName) {
|
|
console.log('切换数据源状态:' + sourceName);
|
|
// 实际项目中应该调用API
|
|
}
|
|
|
|
// 显示数据源详情
|
|
function showDataSourceDetails(sourceName) {
|
|
document.getElementById('detailsName').textContent = sourceName;
|
|
|
|
// 根据数据源设置不同的信息
|
|
if (sourceName === '执法办案系统') {
|
|
document.getElementById('detailsType').textContent = 'API接口';
|
|
document.getElementById('detailsStatus').textContent = '接口故障';
|
|
document.getElementById('detailsFrequency').textContent = '实时';
|
|
document.getElementById('detailsUrl').textContent = 'http://api.example.com/case';
|
|
document.getElementById('detailsCreateTime').textContent = '2024-01-15';
|
|
|
|
// 显示故障报告区域
|
|
document.getElementById('errorReportSection').classList.remove('hidden');
|
|
} else if (sourceName === '户政管理系统') {
|
|
document.getElementById('detailsType').textContent = '数据库连接';
|
|
document.getElementById('detailsStatus').textContent = '运行中';
|
|
document.getElementById('detailsFrequency').textContent = '每小时';
|
|
document.getElementById('detailsUrl').textContent = 'mysql://localhost:3306';
|
|
document.getElementById('detailsCreateTime').textContent = '2024-01-15';
|
|
|
|
// 隐藏故障报告区域
|
|
document.getElementById('errorReportSection').classList.add('hidden');
|
|
} else if (sourceName === '交通管理系统') {
|
|
document.getElementById('detailsType').textContent = '数据库连接';
|
|
document.getElementById('detailsStatus').textContent = '运行中';
|
|
document.getElementById('detailsFrequency').textContent = '实时';
|
|
document.getElementById('detailsUrl').textContent = 'mysql://localhost:3306';
|
|
document.getElementById('detailsCreateTime').textContent = '2024-01-15';
|
|
|
|
// 隐藏故障报告区域
|
|
document.getElementById('errorReportSection').classList.add('hidden');
|
|
}
|
|
|
|
// 数据库信息
|
|
document.getElementById('dbType').textContent = 'MySQL 8.0';
|
|
document.getElementById('dbName').textContent = 'supervision_db';
|
|
document.getElementById('dbTableCount').textContent = '15';
|
|
document.getElementById('dbTotalSize').textContent = '2.3TB';
|
|
|
|
// 统计信息
|
|
document.getElementById('statsCallCount').textContent = '15,678';
|
|
document.getElementById('statsAvgTime').textContent = '125ms';
|
|
document.getElementById('statsSuccessRate').textContent = '99.9%';
|
|
document.getElementById('statsDataIncrement').textContent = '+1.2GB';
|
|
|
|
document.getElementById('dataSourceDetailsModal').classList.add('active');
|
|
}
|
|
|
|
// 打开批量导入模态框
|
|
function openBatchImportModal() {
|
|
document.getElementById('batchImportModal').classList.add('active');
|
|
}
|
|
|
|
// 打开批量导出模态框
|
|
function openBatchExportModal() {
|
|
document.getElementById('batchExportModal').classList.add('active');
|
|
}
|
|
|
|
// 文件拖拽处理
|
|
const dropZone = document.getElementById('dropZone');
|
|
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add('border-blue-400', 'bg-blue-50');
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', () => {
|
|
dropZone.classList.remove('border-blue-400', 'bg-blue-50');
|
|
});
|
|
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('border-blue-400', 'bg-blue-50');
|
|
handleFiles(e.dataTransfer.files);
|
|
});
|
|
|
|
// 文件选择处理
|
|
function handleFileSelect(event) {
|
|
handleFiles(event.target.files);
|
|
}
|
|
|
|
// 处理文件
|
|
function handleFiles(files) {
|
|
const fileList = document.getElementById('fileList');
|
|
fileList.innerHTML = '';
|
|
|
|
Array.from(files).forEach(file => {
|
|
const fileItem = document.createElement('div');
|
|
fileItem.className = 'border rounded-lg p-3 flex items-center justify-between';
|
|
fileItem.innerHTML = `
|
|
<div class="flex items-center">
|
|
<i class="fas fa-file-excel text-green-600 text-xl mr-3"></i>
|
|
<div>
|
|
<p class="font-medium">${file.name}</p>
|
|
<p class="text-sm text-gray-500">${(file.size / 1024 / 1024).toFixed(2)} MB</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="removeFile(this)" class="text-red-600 hover:text-red-800">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
`;
|
|
fileList.appendChild(fileItem);
|
|
});
|
|
|
|
if (files.length > 0) {
|
|
showImportPreview(files[0]);
|
|
}
|
|
}
|
|
|
|
// 移除文件
|
|
function removeFile(button) {
|
|
button.closest('.border').remove();
|
|
}
|
|
|
|
// 显示导入预览
|
|
function showImportPreview(file) {
|
|
const preview = document.getElementById('importPreview');
|
|
const tableHead = document.getElementById('previewTableHead');
|
|
const tableBody = document.getElementById('previewTableBody');
|
|
|
|
// 模拟预览数据
|
|
tableHead.innerHTML = `
|
|
<tr class="border-b">
|
|
<th class="text-left py-2 px-3">资产名称</th>
|
|
<th class="text-left py-2 px-3">数据类型</th>
|
|
<th class="text-left py-2 px-3">所属部门</th>
|
|
<th class="text-left py-2 px-3">访问权限</th>
|
|
<th class="text-left py-2 px-3">标签</th>
|
|
</tr>
|
|
`;
|
|
|
|
tableBody.innerHTML = `
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">执法案件数据库</td>
|
|
<td class="py-2 px-3">结构化数据</td>
|
|
<td class="py-2 px-3">督察总队</td>
|
|
<td class="py-2 px-3">内部使用</td>
|
|
<td class="py-2 px-3 text-sm">执法 / 案件 / 处警</td>
|
|
</tr>
|
|
<tr class="border-b">
|
|
<td class="py-2 px-3">户籍信息数据库</td>
|
|
<td class="py-2 px-3">结构化数据</td>
|
|
<td class="py-2 px-3">户政管理</td>
|
|
<td class="py-2 px-3">受限访问</td>
|
|
<td class="py-2 px-3 text-sm">交通 / 警情 / 反馈</td>
|
|
</tr>
|
|
`;
|
|
|
|
preview.classList.remove('hidden');
|
|
}
|
|
|
|
// 开始导入
|
|
function startImport() {
|
|
console.log('开始导入...');
|
|
// 实际项目中应该调用API
|
|
}
|
|
|
|
// 切换全选字段
|
|
function toggleAllFields() {
|
|
const selectAll = document.getElementById('selectAllFields').checked;
|
|
const checkboxes = document.querySelectorAll('#fieldList input[type="checkbox"]');
|
|
checkboxes.forEach(cb => {
|
|
cb.checked = selectAll;
|
|
});
|
|
}
|
|
|
|
// 开始导出
|
|
function startExport() {
|
|
console.log('开始导出...');
|
|
// 实际项目中应该调用API
|
|
}
|
|
|
|
// 点击模态框外部关闭
|
|
window.onclick = function(event) {
|
|
if (event.target.classList.contains('modal')) {
|
|
event.target.classList.remove('active');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|