zdh
134380caef
- 11个功能视图：监管驾驶舱、飞行检查、稽查办案、风险预警、法规问答、文书生成、企业画像、企业工作台、合规导航、文书辅助、实战支撑 - 监管端/企业端双角色切换 - 跨视图业务联动（检查→文书、风险→派单、稽查→文书） - 统一企业数据模型（5家核心企业） - 日期基准统一为2026-06-28 - AI交互模拟（聊天问答、文书生成、方案推荐） - 无后端依赖，纯前端演示
3515 lines
173 KiB
HTML
3515 lines
173 KiB
HTML
<!-- Generated by Trae Work -->
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>"人工智能+药品监管"应用场景 · 系统演示</title>
|
||
<style>
|
||
:root {
|
||
--bg: #f0f4f9;
|
||
--bg2: #ffffff;
|
||
--ink: #1a2744;
|
||
--muted: #6b7d99;
|
||
--rule: #e1e8f0;
|
||
--accent: #1657a8;
|
||
--accent-dark: #0f3d72;
|
||
--accent2: #0e8f7f;
|
||
--accent3: #d4a017;
|
||
--danger: #dc2626;
|
||
--warn: #f59e0b;
|
||
--success: #10b981;
|
||
--info: #3b82f6;
|
||
--shadow-sm: 0 1px 3px rgba(15,61,114,0.06);
|
||
--shadow: 0 2px 12px rgba(15,61,114,0.08);
|
||
--shadow-lg: 0 8px 32px rgba(15,61,114,0.12);
|
||
}
|
||
@font-face { font-family: 'IS'; src: url('https://fonts.gstatic.com/s/notosanssc/v35/k3kXo84MPvpLmixcA63oeALZTYKL2S24UEg-2_c.woff2') format('woff2'); font-weight: 400; }
|
||
@font-face { font-family: 'IS'; src: url('https://fonts.gstatic.com/s/notosanssc/v35/k3kXo84MPvpLmixcA63oeALZTYKL2S24UEg-2_c.woff2') format('woff2'); font-weight: 700; }
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
*::-webkit-scrollbar { width: 6px; height: 6px; }
|
||
*::-webkit-scrollbar-thumb { background: rgba(100,120,140,0.3); border-radius: 3px; }
|
||
*::-webkit-scrollbar-track { background: transparent; }
|
||
|
||
body {
|
||
font-family: 'IS', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
|
||
background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.7;
|
||
-webkit-font-smoothing: antialiased; overflow: hidden;
|
||
}
|
||
|
||
/* ===== App Layout ===== */
|
||
.app { display: flex; flex-direction: column; height: 100vh; }
|
||
|
||
/* ===== Top Bar ===== */
|
||
.topbar {
|
||
height: 56px; background: var(--accent-dark); color: #fff;
|
||
display: flex; align-items: center; padding: 0 24px; flex-shrink: 0;
|
||
box-shadow: 0 2px 12px rgba(15,61,114,0.2); z-index: 100;
|
||
}
|
||
.topbar-logo { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; }
|
||
.topbar-logo .logo-icon {
|
||
width: 32px; height: 32px; border-radius: 8px;
|
||
background: linear-gradient(135deg, #6fd9c8, #0e8f7f);
|
||
display: flex; align-items: center; justify-content: center; font-size: 18px;
|
||
}
|
||
.topbar-nav { display: flex; gap: 4px; margin-left: 40px; }
|
||
.topbar-nav-item {
|
||
padding: 6px 16px; border-radius: 6px; font-size: 13px; cursor: pointer;
|
||
color: rgba(255,255,255,0.6); transition: all 0.2s; font-weight: 500;
|
||
}
|
||
.topbar-nav-item:hover { color: #fff; background: rgba(255,255,255,0.08); }
|
||
.topbar-nav-item.active { color: #fff; background: rgba(111,217,200,0.18); }
|
||
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
|
||
.topbar-user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.8); }
|
||
.topbar-user .avatar {
|
||
width: 30px; height: 30px; border-radius: 50%;
|
||
background: linear-gradient(135deg, #6fd9c8, #0e8f7f);
|
||
display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
|
||
}
|
||
.topbar-badge {
|
||
background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
|
||
padding: 1px 6px; border-radius: 10px; margin-left: 4px;
|
||
}
|
||
|
||
/* ===== Body Layout ===== */
|
||
.body { display: flex; flex: 1; overflow: hidden; }
|
||
|
||
/* ===== Sidebar ===== */
|
||
.sidebar {
|
||
width: 220px; background: #fff; border-right: 1px solid var(--rule);
|
||
display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
|
||
}
|
||
.sidebar-group { padding: 16px 0 8px; border-bottom: 1px solid var(--rule); }
|
||
.sidebar-group:last-child { border-bottom: none; }
|
||
.sidebar-group-title {
|
||
font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em;
|
||
text-transform: uppercase; padding: 0 20px 8px;
|
||
}
|
||
.sidebar-item {
|
||
display: flex; align-items: center; gap: 10px; padding: 9px 20px;
|
||
font-size: 13px; color: var(--ink); cursor: pointer; transition: all 0.15s;
|
||
border-left: 3px solid transparent; position: relative;
|
||
}
|
||
.sidebar-item:hover { background: var(--bg); }
|
||
.sidebar-item.active {
|
||
background: linear-gradient(90deg, rgba(22,87,168,0.06), transparent);
|
||
color: var(--accent); font-weight: 600; border-left-color: var(--accent);
|
||
}
|
||
.sidebar-item .si-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
|
||
.sidebar-item .si-badge {
|
||
margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 6px;
|
||
border-radius: 8px; background: var(--danger); color: #fff;
|
||
}
|
||
.sidebar-item .si-badge.teal { background: var(--accent2); }
|
||
.sidebar-item .si-badge.gold { background: var(--accent3); }
|
||
|
||
/* ===== Main Content ===== */
|
||
.main { flex: 1; overflow-y: auto; padding: 0; }
|
||
.view { display: none; padding: 24px; }
|
||
.view.active { display: block; }
|
||
|
||
/* ===== Common Components ===== */
|
||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||
.page-title { font-size: 20px; font-weight: 700; color: var(--ink); }
|
||
.page-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
|
||
|
||
.card { background: var(--bg2); border-radius: 10px; box-shadow: var(--shadow-sm); border: 1px solid var(--rule); }
|
||
.card-body { padding: 20px; }
|
||
.card-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
|
||
.card-title .ct-icon { font-size: 18px; }
|
||
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px;
|
||
border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
|
||
border: none; transition: all 0.2s; white-space: nowrap;
|
||
}
|
||
.btn-primary { background: var(--accent); color: #fff; }
|
||
.btn-primary:hover { background: var(--accent-dark); }
|
||
.btn-teal { background: var(--accent2); color: #fff; }
|
||
.btn-teal:hover { opacity: 0.9; }
|
||
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
|
||
.btn-ghost:hover { background: var(--accent); color: #fff; }
|
||
.btn-sm { padding: 5px 12px; font-size: 12px; }
|
||
|
||
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||
.badge-red { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
|
||
.badge-orange { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
|
||
.badge-blue { background: #eff6ff; color: var(--info); border: 1px solid #bfdbfe; }
|
||
.badge-green { background: #ecfdf5; color: var(--success); border: 1px solid #a7f3d0; }
|
||
.badge-gray { background: #f3f4f6; color: var(--muted); border: 1px solid var(--rule); }
|
||
.badge-teal { background: rgba(14,143,127,0.08); color: var(--accent2); border: 1px solid rgba(14,143,127,0.2); }
|
||
|
||
.tag { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 500; margin: 2px; }
|
||
.tag-blue { background: rgba(22,87,168,0.08); color: var(--accent); }
|
||
.tag-teal { background: rgba(14,143,127,0.08); color: var(--accent2); }
|
||
.tag-gold { background: rgba(212,160,23,0.1); color: var(--accent3); }
|
||
|
||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||
thead th { background: #f8fafc; color: var(--muted); font-weight: 600; text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--rule); font-size: 12px; }
|
||
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
|
||
tbody tr:hover { background: #f8fafc; }
|
||
|
||
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
|
||
.stat-card { background: var(--bg2); border-radius: 10px; padding: 18px; border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
|
||
.stat-card .stat-icon { font-size: 24px; margin-bottom: 8px; }
|
||
.stat-card .stat-num { font-size: 28px; font-weight: 700; color: var(--accent); line-height: 1.2; }
|
||
.stat-card .stat-num.teal { color: var(--accent2); }
|
||
.stat-card .stat-num.danger { color: var(--danger); }
|
||
.stat-card .stat-num.warn { color: var(--warn); }
|
||
.stat-card .stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
|
||
|
||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
|
||
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
|
||
@media (max-width: 1200px) { .grid-2, .grid-3, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; } }
|
||
|
||
/* ===== Chat Interface ===== */
|
||
.chat-container { display: flex; flex-direction: column; height: calc(100vh - 180px); }
|
||
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
|
||
.chat-msg { display: flex; gap: 12px; max-width: 80%; }
|
||
.chat-msg.user { margin-left: auto; flex-direction: row-reverse; }
|
||
.chat-msg .msg-avatar { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
|
||
.chat-msg.ai .msg-avatar { background: linear-gradient(135deg, #6fd9c8, #0e8f7f); color: #fff; }
|
||
.chat-msg.user .msg-avatar { background: var(--accent); color: #fff; }
|
||
.chat-msg .msg-bubble { padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.8; }
|
||
.chat-msg.ai .msg-bubble { background: #f0f4f9; color: var(--ink); border-top-left-radius: 4px; }
|
||
.chat-msg.user .msg-bubble { background: var(--accent); color: #fff; border-top-right-radius: 4px; }
|
||
.chat-msg .msg-source { margin-top: 8px; padding: 8px 12px; background: rgba(22,87,168,0.04); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 12px; color: var(--muted); }
|
||
.chat-msg .msg-source strong { color: var(--accent); }
|
||
.chat-input { padding: 12px 16px; border-top: 1px solid var(--rule); display: flex; gap: 10px; align-items: center; background: var(--bg2); }
|
||
.chat-input input { flex: 1; padding: 10px 16px; border: 1px solid var(--rule); border-radius: 8px; font-size: 13px; outline: none; transition: border-color 0.2s; }
|
||
.chat-input input:focus { border-color: var(--accent); }
|
||
|
||
/* ===== AI Generating Dots ===== */
|
||
.typing-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
|
||
.typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: td 1.2s infinite ease-in-out; }
|
||
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
|
||
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
|
||
@keyframes td { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } }
|
||
|
||
/* ===== Risk Gauge ===== */
|
||
.risk-gauge { width: 120px; height: 120px; position: relative; margin: 0 auto; }
|
||
.risk-gauge svg { transform: rotate(-90deg); }
|
||
.risk-gauge .gauge-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||
.risk-gauge .gauge-score { font-size: 32px; font-weight: 700; }
|
||
.risk-gauge .gauge-label { font-size: 11px; color: var(--muted); }
|
||
|
||
/* ===== Timeline ===== */
|
||
.timeline { position: relative; padding-left: 24px; }
|
||
.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
|
||
.timeline-item { position: relative; padding-bottom: 20px; }
|
||
.timeline-item::before { content: ''; position: absolute; left: -20px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--accent); }
|
||
.timeline-item.danger::before { background: var(--danger); box-shadow: 0 0 0 2px var(--danger); }
|
||
.timeline-item.warn::before { background: var(--warn); box-shadow: 0 0 0 2px var(--warn); }
|
||
.timeline-item.success::before { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
|
||
.timeline-time { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
|
||
.timeline-content { font-size: 13px; }
|
||
|
||
/* ===== Progress Bar ===== */
|
||
.progress { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
|
||
.progress-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
|
||
.progress-bar.red { background: var(--danger); }
|
||
.progress-bar.orange { background: var(--warn); }
|
||
.progress-bar.blue { background: var(--info); }
|
||
.progress-bar.green { background: var(--success); }
|
||
|
||
/* ===== AI Label ===== */
|
||
.ai-label { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 700; background: linear-gradient(135deg, rgba(14,143,127,0.1), rgba(22,87,168,0.1)); color: var(--accent2); border: 1px solid rgba(14,143,127,0.2); }
|
||
|
||
/* ===== Tabs ===== */
|
||
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--rule); margin-bottom: 16px; }
|
||
.tab { padding: 8px 20px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
|
||
.tab:hover { color: var(--accent); }
|
||
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||
|
||
/* ===== Form ===== */
|
||
.form-group { margin-bottom: 14px; }
|
||
.form-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; display: block; }
|
||
.form-input, .form-select, .form-textarea {
|
||
width: 100%; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px;
|
||
font-size: 13px; outline: none; transition: border-color 0.2s; background: var(--bg2); color: var(--ink);
|
||
}
|
||
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
|
||
.form-textarea { resize: vertical; min-height: 80px; }
|
||
|
||
/* ===== Toast ===== */
|
||
.toast {
|
||
position: fixed; top: 70px; right: 24px; z-index: 9999;
|
||
background: var(--accent-dark); color: #fff; padding: 12px 20px;
|
||
border-radius: 8px; font-size: 13px; box-shadow: var(--shadow-lg);
|
||
transform: translateX(400px); transition: transform 0.3s; display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.toast.show { transform: translateX(0); }
|
||
.toast.success { background: var(--success); }
|
||
.toast.warn, .toast.warning { background: var(--warn); }
|
||
.toast.info { background: var(--accent); }
|
||
.toast.error { background: var(--danger); }
|
||
|
||
/* ===== Check Item ===== */
|
||
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
|
||
.check-item:last-child { border-bottom: none; }
|
||
.check-item .ci-checkbox { width: 18px; height: 18px; border: 2px solid var(--rule); border-radius: 4px; flex-shrink: 0; margin-top: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
|
||
.check-item .ci-checkbox.checked { background: var(--accent2); border-color: var(--accent2); color: #fff; }
|
||
.check-item .ci-content { flex: 1; }
|
||
.check-item .ci-title { font-size: 13px; font-weight: 500; }
|
||
.check-item .ci-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
||
.check-item .ci-priority { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 8px; }
|
||
.ci-priority.high { background: #fef2f2; color: var(--danger); }
|
||
.ci-priority.mid { background: #fffbeb; color: var(--warn); }
|
||
.ci-priority.low { background: #eff6ff; color: var(--info); }
|
||
|
||
/* ===== Demo Notice ===== */
|
||
.demo-notice {
|
||
position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
|
||
background: rgba(15,61,114,0.9); color: rgba(255,255,255,0.9);
|
||
padding: 6px 16px; border-radius: 100px; font-size: 11px; z-index: 50;
|
||
backdrop-filter: blur(10px); display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.demo-notice .dot { width: 6px; height: 6px; border-radius: 50%; background: #6fd9c8; animation: pulse 2s infinite; }
|
||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||
|
||
/* ===== Enterprise Profile ===== */
|
||
.profile-header { display: flex; align-items: center; gap: 16px; padding: 20px; background: linear-gradient(135deg, rgba(22,87,168,0.05), rgba(14,143,127,0.05)); border-radius: 10px; margin-bottom: 16px; }
|
||
.profile-avatar { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #fff; }
|
||
.profile-info h3 { font-size: 18px; font-weight: 700; }
|
||
.profile-info p { font-size: 12px; color: var(--muted); }
|
||
|
||
/* ===== Relationship Graph (CSS only) ===== */
|
||
.rel-graph { position: relative; height: 300px; background: radial-gradient(circle at center, rgba(22,87,168,0.03), transparent 70%); border-radius: 10px; border: 1px solid var(--rule); overflow: hidden; }
|
||
.rel-node { position: absolute; padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow); }
|
||
.rel-node.center { left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--accent); color: #fff; z-index: 3; }
|
||
.rel-node.satellite { background: var(--bg2); border: 1px solid var(--rule); color: var(--ink); z-index: 2; }
|
||
.rel-line { position: absolute; height: 2px; background: linear-gradient(90deg, rgba(22,87,168,0.2), rgba(14,143,127,0.2)); transform-origin: left center; z-index: 1; }
|
||
|
||
/* ===== Modal ===== */
|
||
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,35,55,0.5); backdrop-filter: blur(3px); z-index: 200; align-items: center; justify-content: center; }
|
||
.modal-overlay.show { display: flex; }
|
||
.modal { background: var(--bg2); border-radius: 12px; max-width: 640px; width: 92%; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
|
||
.modal-header { padding: 18px 24px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; }
|
||
.modal-header h3 { font-size: 16px; font-weight: 700; }
|
||
.modal-close { width: 28px; height: 28px; border: none; background: var(--bg); border-radius: 6px; cursor: pointer; font-size: 18px; color: var(--muted); display: flex; align-items: center; justify-content: center; }
|
||
.modal-close:hover { background: var(--danger-soft, #fef2f2); color: var(--danger); }
|
||
.modal-body { padding: 20px 24px; }
|
||
|
||
/* ===== Animation ===== */
|
||
.fade-in { animation: fadeIn 0.3s ease; }
|
||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||
.slide-in { animation: slideIn 0.25s ease; }
|
||
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
|
||
|
||
/* ===== Responsive ===== */
|
||
@media (max-width: 900px) {
|
||
.sidebar { display: none; }
|
||
.topbar-nav { display: none; }
|
||
.stat-grid { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<div class="app">
|
||
|
||
<!-- ===== Top Bar ===== -->
|
||
<div class="topbar">
|
||
<div class="topbar-logo">
|
||
<div class="logo-icon">AI</div>
|
||
<span>人工智能+药品监管 · 智慧监管平台</span>
|
||
</div>
|
||
<div class="topbar-nav">
|
||
<div class="topbar-nav-item active" onclick="switchApp('regulator')">药监AI监管助手</div>
|
||
<div class="topbar-nav-item" onclick="switchApp('enterprise')">药企知识助手</div>
|
||
</div>
|
||
<div class="topbar-right">
|
||
<div class="topbar-user">
|
||
<div class="avatar">李</div>
|
||
<span>李监管 · 辽宁省药监局</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Body ===== -->
|
||
<div class="body">
|
||
|
||
<!-- ===== Sidebar (Regulator) ===== -->
|
||
<aside class="sidebar" id="sidebar-regulator">
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">监管首页</div>
|
||
<div class="sidebar-item active" onclick="showView('dashboard')">
|
||
<span class="si-icon">📊</span>监管驾驶舱
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">智能监管</div>
|
||
<div class="sidebar-item" onclick="showView('inspection')">
|
||
<span class="si-icon">✈️</span>飞行检查辅助
|
||
</div>
|
||
<div class="sidebar-item" onclick="showView('investigation')">
|
||
<span class="si-icon">⚖️</span>稽查办案辅助
|
||
</div>
|
||
<div class="sidebar-item" onclick="showView('risk')">
|
||
<span class="si-icon">🚨</span>风险预警研判
|
||
<span class="si-badge">3</span>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showView('legalqa')">
|
||
<span class="si-icon">📖</span>法规智能问答
|
||
</div>
|
||
<div class="sidebar-item" onclick="showView('document')">
|
||
<span class="si-icon">📝</span>文书智能生成
|
||
</div>
|
||
<div class="sidebar-item" onclick="showView('profile')">
|
||
<span class="si-icon">🏢</span>企业全景画像
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ===== Sidebar (Enterprise) ===== -->
|
||
<aside class="sidebar" id="sidebar-enterprise" style="display:none;">
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">企业首页</div>
|
||
<div class="sidebar-item active" onclick="showView('ent-home')">
|
||
<span class="si-icon">🏠</span>企业工作台
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">知识服务</div>
|
||
<div class="sidebar-item" onclick="showView('ent-compliance')">
|
||
<span class="si-icon">📋</span>合规导航
|
||
</div>
|
||
<div class="sidebar-item" onclick="showView('ent-document')">
|
||
<span class="si-icon">📄</span>文书辅助
|
||
</div>
|
||
<div class="sidebar-item" onclick="showView('ent-training')">
|
||
<span class="si-icon">🎓</span>实战支撑
|
||
<span class="si-badge teal">新</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ===== Main Content ===== -->
|
||
<main class="main">
|
||
|
||
<!-- VIEW: Dashboard -->
|
||
<div class="view active" id="view-dashboard">
|
||
<div class="page-header">
|
||
<h1 class="page-title">监管驾驶舱</h1>
|
||
<p class="page-desc">辽宁省药品智慧监管总览 · 实时数据监测与AI辅助决策</p>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="stat-grid">
|
||
<div class="stat-card fade-in">
|
||
<div class="stat-icon">📊</div>
|
||
<div class="stat-num">1.24亿</div>
|
||
<div class="stat-label">监管数据总量（条）</div>
|
||
</div>
|
||
<div class="stat-card fade-in">
|
||
<div class="stat-icon">🧠</div>
|
||
<div class="stat-num">136</div>
|
||
<div class="stat-label">风险识别模型（项）</div>
|
||
</div>
|
||
<div class="stat-card fade-in">
|
||
<div class="stat-icon">🏢</div>
|
||
<div class="stat-num">2095</div>
|
||
<div class="stat-label">企业画像（家）</div>
|
||
</div>
|
||
<div class="stat-card fade-in">
|
||
<div class="stat-icon">⚖️</div>
|
||
<div class="stat-num">326</div>
|
||
<div class="stat-label">AI辅助办案（件）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 风险预警看板 + AI辅助统计 -->
|
||
<div class="grid-2-1">
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<div class="card-title">
|
||
<span class="ct-icon">🚨</span>风险预警看板
|
||
<span class="badge-red" style="margin-left:8px;">实时</span>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>企业名称</th>
|
||
<th>风险等级</th>
|
||
<th>风险类型</th>
|
||
<th>预警时间</th>
|
||
<th>处置状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>辽宁XX制药有限公司</td>
|
||
<td><span class="badge-red">高风险</span></td>
|
||
<td>生产违规</td>
|
||
<td>2026-06-28 09:12</td>
|
||
<td><span class="badge-orange">处置中</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>沈阳YY药业股份有限公司</td>
|
||
<td><span class="badge-red">高风险</span></td>
|
||
<td>质量问题</td>
|
||
<td>2026-06-28 08:45</td>
|
||
<td><span class="badge-orange">处置中</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>大连ZZ生物科技有限公司</td>
|
||
<td><span class="badge-orange">中风险</span></td>
|
||
<td>经营违规</td>
|
||
<td>2026-06-27 16:30</td>
|
||
<td><span class="badge-blue">待处理</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>鞍山AA制药集团</td>
|
||
<td><span class="badge-orange">中风险</span></td>
|
||
<td>生产违规</td>
|
||
<td>2026-06-27 14:20</td>
|
||
<td><span class="badge-green">已闭环</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>抚顺BB医药有限公司</td>
|
||
<td><span class="badge-blue">低风险</span></td>
|
||
<td>经营违规</td>
|
||
<td>2026-06-27 10:08</td>
|
||
<td><span class="badge-blue">待处理</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<div class="card-title">
|
||
<span class="ct-icon">🤖</span>AI辅助统计
|
||
<span class="ai-label">本月</span>
|
||
</div>
|
||
<div style="margin-top:16px;">
|
||
<div style="margin-bottom:16px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
||
<span>飞行检查</span>
|
||
<span style="font-weight:600;">85%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar blue" style="width:85%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:16px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
||
<span>稽查办案</span>
|
||
<span style="font-weight:600;">72%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar teal" style="width:72%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:16px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
||
<span>风险预警</span>
|
||
<span style="font-weight:600;">91%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar red" style="width:91%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:16px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
||
<span>法规问答</span>
|
||
<span style="font-weight:600;">68%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar orange" style="width:68%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:0;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
||
<span>文书生成</span>
|
||
<span style="font-weight:600;">80%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar green" style="width:80%;"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 近期检查任务 + 系统动态 -->
|
||
<div class="grid-2">
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<div class="card-title">
|
||
<span class="ct-icon">📋</span>近期检查任务
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>企业名称</th>
|
||
<th>检查类型</th>
|
||
<th>检查日期</th>
|
||
<th>AI方案</th>
|
||
<th>检查员</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>辽宁XX制药有限公司</td>
|
||
<td><span class="tag-gold">飞行检查</span></td>
|
||
<td>2026-06-30</td>
|
||
<td><span class="badge-green">已生成</span></td>
|
||
<td>张明</td>
|
||
</tr>
|
||
<tr>
|
||
<td>沈阳YY药业股份有限公司</td>
|
||
<td><span class="tag-blue">常规检查</span></td>
|
||
<td>2026-07-02</td>
|
||
<td><span class="badge-green">已生成</span></td>
|
||
<td>李华</td>
|
||
</tr>
|
||
<tr>
|
||
<td>大连ZZ生物科技有限公司</td>
|
||
<td><span class="tag-gold">飞行检查</span></td>
|
||
<td>2026-07-05</td>
|
||
<td><span class="badge-blue">生成中</span></td>
|
||
<td>王芳</td>
|
||
</tr>
|
||
<tr>
|
||
<td>鞍山AA制药集团</td>
|
||
<td><span class="tag-teal">跟踪检查</span></td>
|
||
<td>2026-07-08</td>
|
||
<td><span class="badge-gray">待生成</span></td>
|
||
<td>赵强</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<div class="card-title">
|
||
<span class="ct-icon">📡</span>系统动态
|
||
</div>
|
||
<div class="timeline" style="margin-top:16px;">
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">09:30</div>
|
||
<div class="timeline-content">
|
||
<strong>风险预警模型更新</strong>
|
||
<p>药品生产违规识别模型v3.2已上线，识别准确率提升至96.8%</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">08:15</div>
|
||
<div class="timeline-content">
|
||
<strong>知识库同步完成</strong>
|
||
<p>2026版《药品管理法》实施细则已同步至知识图谱，共更新条款127条</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">昨日 16:40</div>
|
||
<div class="timeline-content">
|
||
<strong>预警发布</strong>
|
||
<p>系统自动发布3条高风险预警，已派单至相关检查机构</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">昨日 14:20</div>
|
||
<div class="timeline-content">
|
||
<strong>AI辅助办案统计</strong>
|
||
<p>本月AI辅助完成稽查办案68件，平均办案周期缩短42%</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">昨日 10:05</div>
|
||
<div class="timeline-content">
|
||
<strong>企业画像更新</strong>
|
||
<p>新增企业画像12家，更新企业风险评分326家</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIEW: Inspection -->
|
||
<div class="view" id="view-inspection">
|
||
<div class="page-header">
|
||
<h1 class="page-title">飞行检查智能辅助</h1>
|
||
<p class="page-desc">AI辅助检查方案生成与现场研判 · RAG+知识图谱驱动</p>
|
||
</div>
|
||
|
||
<div class="grid-1-2">
|
||
<!-- 左侧：检查任务信息 -->
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<div class="card-title">
|
||
<span class="ct-icon">📝</span>检查任务信息
|
||
</div>
|
||
<div style="margin-top:16px;">
|
||
<div class="form-group">
|
||
<label class="form-label">企业名称</label>
|
||
<select class="form-select" id="insp-company">
|
||
<option value="">请选择企业</option>
|
||
<option value="辽宁XX制药有限公司">辽宁XX制药有限公司</option>
|
||
<option value="沈阳YY药业股份有限公司">沈阳YY药业股份有限公司</option>
|
||
<option value="大连ZZ生物科技有限公司">大连ZZ生物科技有限公司</option>
|
||
<option value="鞍山AA制药集团">鞍山AA制药集团</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">检查类型</label>
|
||
<select class="form-select" id="insp-type">
|
||
<option value="常规检查">常规检查</option>
|
||
<option value="飞行检查" selected>飞行检查</option>
|
||
<option value="跟踪检查">跟踪检查</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">检查重点</label>
|
||
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;">
|
||
<span class="tag-blue insp-focus" style="cursor:pointer;">生产质量控制</span>
|
||
<span class="tag-teal insp-focus" style="cursor:pointer;">仓储管理</span>
|
||
<span class="tag-gold insp-focus" style="cursor:pointer;">记录真实性</span>
|
||
<span class="tag-blue insp-focus" style="cursor:pointer;">人员资质</span>
|
||
<span class="tag-teal insp-focus" style="cursor:pointer;">物料管理</span>
|
||
<span class="tag-gold insp-focus" style="cursor:pointer;">检验放行</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary" id="btn-generate-plan" style="width:100%;margin-top:8px;">
|
||
生成检查方案
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 企业风险概览 -->
|
||
<div style="margin-top:20px;padding:12px;border-radius:8px;background:rgba(255,77,79,0.08);border:1px solid rgba(255,77,79,0.2);">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||
<span class="badge-red">高风险</span>
|
||
<strong style="font-size:14px;">企业风险评分：87.5</strong>
|
||
</div>
|
||
<p style="font-size:13px;color:var(--text-secondary);margin:0;">近6个月2次预警，生产记录存在异常波动，建议重点核查。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：AI生成的检查方案 -->
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<div class="card-title">
|
||
<span class="ct-icon">🤖</span>AI生成的检查方案
|
||
<span class="ai-label">AI辅助</span>
|
||
</div>
|
||
|
||
<!-- 方案内容区（初始为空状态） -->
|
||
<div id="inspection-plan-content">
|
||
<div id="plan-empty-state" style="text-align:center;padding:60px 20px;color:var(--text-secondary);">
|
||
<div style="font-size:48px;margin-bottom:16px;">📋</div>
|
||
<p style="font-size:15px;">请选择企业并点击"生成检查方案"</p>
|
||
<p style="font-size:13px;margin-top:8px;">AI将基于企业画像、历史检查记录与法规知识库自动生成方案</p>
|
||
</div>
|
||
|
||
<div id="plan-result" style="display:none;">
|
||
<h3 style="margin:0 0 4px;font-size:17px;">辽宁XX制药有限公司 - 飞行检查方案</h3>
|
||
<p style="font-size:12px;color:var(--text-secondary);margin:0 0 16px;">方案编号：AI-INS-20260628-001 | 生成时间：2026-06-28 09:35</p>
|
||
|
||
<!-- 企业风险摘要 -->
|
||
<div style="padding:12px;background:rgba(22,119,255,0.06);border-radius:8px;margin-bottom:16px;border-left:3px solid #1677ff;">
|
||
<strong style="font-size:13px;">📌 企业风险摘要</strong>
|
||
<p style="font-size:13px;margin:6px 0 0;line-height:1.6;">该企业近6个月触发2次风险预警，主要涉及生产记录异常与物料管理偏差。GMP飞检历史显示2019年曾因数据完整性问题被警告。当前风险评分92.5（高风险），建议重点关注生产质量控制与记录真实性。</p>
|
||
</div>
|
||
|
||
<!-- 检查要点清单 -->
|
||
<strong style="font-size:13px;">✅ 检查要点清单</strong>
|
||
<div style="margin-top:10px;">
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">生产批次记录完整性核查</div>
|
||
<div class="ci-desc">核查近12个月所有生产批次的批生产记录、检验记录是否完整、可追溯</div>
|
||
<span class="ci-priority" style="color:#ff4d4f;">高优先级</span>
|
||
</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">数据完整性审计</div>
|
||
<div class="ci-desc">检查电子数据是否存在修改、删除痕迹，审计追踪功能是否开启</div>
|
||
<span class="ci-priority" style="color:#ff4d4f;">高优先级</span>
|
||
</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">物料供应商资质审核</div>
|
||
<div class="ci-desc">核查主要原辅料供应商审计报告及资质有效期</div>
|
||
<span class="ci-priority" style="color:#fa8c16;">中优先级</span>
|
||
</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">仓储温湿度监控系统</div>
|
||
<div class="ci-desc">检查仓库温湿度记录连续性及超标处理情况</div>
|
||
<span class="ci-priority" style="color:#fa8c16;">中优先级</span>
|
||
</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">关键岗位人员资质</div>
|
||
<div class="ci-desc">核查质量负责人、生产负责人的资质证书及履职情况</div>
|
||
<span class="ci-priority" style="color:#fa8c16;">中优先级</span>
|
||
</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">检验方法验证与放行</div>
|
||
<div class="ci-desc">抽查成品检验报告与放行审核记录</div>
|
||
<span class="ci-priority" style="color:#1677ff;">低优先级</span>
|
||
</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">偏差与CAPA管理</div>
|
||
<div class="ci-desc">核查近12个月偏差记录及纠正预防措施闭环情况</div>
|
||
<span class="ci-priority" style="color:#1677ff;">低优先级</span>
|
||
</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">变更控制系统</div>
|
||
<div class="ci-desc">检查主要变更是否经过评估审批</div>
|
||
<span class="ci-priority" style="color:#1677ff;">低优先级</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 法规依据 -->
|
||
<div style="margin-top:16px;padding:12px;background:rgba(250,173,20,0.06);border-radius:8px;border-left:3px solid #faad14;">
|
||
<strong style="font-size:13px;">📜 法规依据</strong>
|
||
<ul style="margin:8px 0 0 0;padding-left:20px;font-size:13px;line-height:1.8;">
|
||
<li>《药品管理法》第六十四条 — 药品生产企业的生产活动应当符合药品生产质量管理规范</li>
|
||
<li>《药品生产质量管理规范（2010年修订）》第一百四十八条 — 数据完整性要求</li>
|
||
<li>《药品检查管理办法（试行）》第二十二条 — 飞行检查的组织实施</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 底部按钮 -->
|
||
<div style="display:flex;gap:10px;margin-top:20px;">
|
||
<button class="btn btn-ghost btn-sm" onclick="showToast('方案已导出为PDF','success')">导出方案</button>
|
||
<button class="btn btn-primary btn-sm" onclick="navigateToDoc('inspection')">生成检查报告</button>
|
||
<button class="btn btn-teal btn-sm" id="btn-field-analysis">现场研判</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 现场研判模态框 -->
|
||
<div class="modal-overlay" id="modal-field-analysis" style="display:none;">
|
||
<div class="card" style="width:680px;max-width:92vw;max-height:88vh;overflow-y:auto;">
|
||
<div class="card-body">
|
||
<div class="card-title" style="display:flex;justify-content:space-between;align-items:center;">
|
||
<span><span class="ct-icon">🔍</span>现场研判助手 <span class="ai-label">AI辅助</span></span>
|
||
<button class="btn btn-ghost btn-sm" id="btn-close-modal" style="padding:4px 10px;">✕</button>
|
||
</div>
|
||
|
||
<div style="margin-top:16px;">
|
||
<div class="form-group">
|
||
<label class="form-label">现场发现问题描述</label>
|
||
<textarea class="form-textarea" id="field-issue" rows="3" placeholder="请描述现场发现的问题，例如：发现批号20260515的生产记录存在涂改痕迹..."></textarea>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm" id="btn-analyze-issue" style="margin-bottom:16px;">AI分析研判</button>
|
||
|
||
<!-- AI分析结果 -->
|
||
<div id="field-analysis-result" style="display:none;">
|
||
<div style="padding:12px;background:rgba(22,119,255,0.06);border-radius:8px;margin-bottom:12px;border-left:3px solid #1677ff;">
|
||
<strong style="font-size:13px;">🤖 AI分析建议</strong>
|
||
<p style="font-size:13px;margin:6px 0 0;line-height:1.7;">该问题涉嫌违反《药品生产质量管理规范》第一百四十八条数据完整性要求，可能构成生产记录造假。建议：</p>
|
||
<ul style="margin:6px 0 0;padding-left:20px;font-size:13px;line-height:1.8;">
|
||
<li>立即固定相关证据，包括纸质记录原件及电子数据</li>
|
||
<li>调取该批次完整的批生产记录、称量记录、设备使用日志</li>
|
||
<li>对相关操作人员进行询问并制作笔录</li>
|
||
<li>核查该批次产品放行情况及流向</li>
|
||
</ul>
|
||
</div>
|
||
<div style="padding:12px;background:rgba(250,173,20,0.06);border-radius:8px;border-left:3px solid #faad14;">
|
||
<strong style="font-size:13px;">📜 法规匹配结果</strong>
|
||
<table style="margin-top:8px;">
|
||
<thead>
|
||
<tr><th>法规名称</th><th>条款</th><th>匹配度</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>药品管理法</td>
|
||
<td>第一百二十四条</td>
|
||
<td><div class="progress" style="width:80px;"><div class="progress-bar red" style="width:95%;"></div></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>GMP（2010修订）</td>
|
||
<td>第一百四十八条</td>
|
||
<td><div class="progress" style="width:80px;"><div class="progress-bar orange" style="width:88%;"></div></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>药品记录与数据管理规范</td>
|
||
<td>第十六条</td>
|
||
<td><div class="progress" style="width:80px;"><div class="progress-bar blue" style="width:82%;"></div></div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIEW: Investigation -->
|
||
<div class="view" id="view-investigation">
|
||
<div class="page-header">
|
||
<h1 class="page-title">稽查办案智能辅助</h1>
|
||
<p class="page-desc">立案预审 · 证据链 · 裁量计算 · 类案校验 · AI全流程辅助</p>
|
||
</div>
|
||
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<!-- 标签页 -->
|
||
<div class="tabs">
|
||
<div class="tab active" data-tab="pre-review">立案预审</div>
|
||
<div class="tab" data-tab="evidence">证据链构建</div>
|
||
<div class="tab" data-tab="discretion">裁量计算</div>
|
||
<div class="tab" data-tab="similar">类案校验</div>
|
||
</div>
|
||
|
||
<!-- Tab1: 立案预审 -->
|
||
<div data-tab-content="pre-review" style="margin-top:20px;">
|
||
<div class="grid-1-2">
|
||
<div>
|
||
<div class="form-group">
|
||
<label class="form-label">案件名称</label>
|
||
<input class="form-input" id="case-name" value="辽宁XX制药生产记录造假案" placeholder="请输入案件名称">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">涉嫌违法行为</label>
|
||
<textarea class="form-textarea" id="case-illegal" rows="4" placeholder="请描述涉嫌违法行为">2026年6月检查发现，该企业批号20260515的注射用头孢曲松钠批生产记录存在涂改痕迹，原始电子数据被删除，涉嫌伪造生产记录、隐瞒真实生产情况。</textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">当事人信息</label>
|
||
<input class="form-input" id="case-party" value="辽宁XX制药有限公司（法定代表人：王某某）" placeholder="请输入当事人信息">
|
||
</div>
|
||
<button class="btn btn-primary" id="btn-pre-review">AI预审</button>
|
||
<button class="btn btn-teal" id="btn-gen-penalty" style="margin-top:10px;display:none;" onclick="navigateToDoc('penalty')">生成行政处罚决定书</button>
|
||
</div>
|
||
|
||
<div id="pre-review-result" style="display:none;">
|
||
<div class="card" style="background:rgba(22,119,255,0.04);">
|
||
<div class="card-body">
|
||
<div class="card-title"><span class="ct-icon">🤖</span>AI预审分析 <span class="ai-label">AI辅助</span></div>
|
||
<div style="margin-top:12px;">
|
||
<strong style="font-size:13px;">一、违法事实认定</strong>
|
||
<p style="font-size:13px;margin:6px 0 12px;line-height:1.6;">经AI分析，当事人涉嫌伪造、变造生产记录，删除电子数据，违反《药品管理法》第一百二十四条规定。事实认定依据充分，证据链初步成立。</p>
|
||
<strong style="font-size:13px;">二、适用条款建议</strong>
|
||
<ul style="font-size:13px;margin:6px 0 12px;padding-left:20px;line-height:1.8;">
|
||
<li>《药品管理法》第一百二十四条 — 伪造、变造生产记录</li>
|
||
<li>《药品管理法》第一百二十六条 — 未按照GMP组织生产</li>
|
||
</ul>
|
||
<strong style="font-size:13px;">三、立案建议</strong>
|
||
<div style="margin-top:6px;padding:10px;background:rgba(82,196,26,0.1);border-radius:6px;">
|
||
<span class="badge-green">建议立案</span>
|
||
<span style="font-size:13px;margin-left:8px;">违法事实清楚，证据初步充分，符合立案条件。建议移送稽查部门进一步调查。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="pre-review-empty" style="display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:13px;">点击"AI预审"开始分析</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab2: 证据链构建 -->
|
||
<div data-tab-content="evidence" style="margin-top:20px;display:none;">
|
||
<div class="card-title"><span class="ct-icon">🔗</span>证据清单 <span class="ai-label">AI辅助</span></div>
|
||
<table style="margin-top:12px;">
|
||
<thead>
|
||
<tr>
|
||
<th>编号</th>
|
||
<th>证据名称</th>
|
||
<th>证据类型</th>
|
||
<th>证明事项</th>
|
||
<th>完整度</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>EV-001</td>
|
||
<td>批号20260515批生产记录原件</td>
|
||
<td>书证</td>
|
||
<td>记录涂改事实</td>
|
||
<td><div class="progress" style="width:100px;"><div class="progress-bar green" style="width:90%;"></div></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>EV-002</td>
|
||
<td>生产设备电子数据日志</td>
|
||
<td>电子数据</td>
|
||
<td>数据删除痕迹</td>
|
||
<td><div class="progress" style="width:100px;"><div class="progress-bar orange" style="width:65%;"></div></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>EV-003</td>
|
||
<td>操作人员询问笔录</td>
|
||
<td>言词证据</td>
|
||
<td>操作过程还原</td>
|
||
<td><div class="progress" style="width:100px;"><div class="progress-bar red" style="width:30%;"></div></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>EV-004</td>
|
||
<td>成品放行审核记录</td>
|
||
<td>书证</td>
|
||
<td>放行流程合规性</td>
|
||
<td><div class="progress" style="width:100px;"><div class="progress-bar orange" style="width:55%;"></div></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>EV-005</td>
|
||
<td>产品销售流向记录</td>
|
||
<td>书证</td>
|
||
<td>产品流向追溯</td>
|
||
<td><div class="progress" style="width:100px;"><div class="progress-bar blue" style="width:75%;"></div></div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="card" style="background:rgba(255,77,79,0.04);margin-top:16px;">
|
||
<div class="card-body">
|
||
<div class="card-title"><span class="ct-icon">🤖</span>AI证据链分析</div>
|
||
<div style="margin-top:12px;">
|
||
<div style="margin-bottom:12px;">
|
||
<span class="badge-red">缺失证据</span>
|
||
<span style="font-size:13px;margin-left:8px;">操作人员询问笔录完整度不足（30%），需补充至少2名相关人员的询问笔录</span>
|
||
</div>
|
||
<div style="margin-bottom:12px;">
|
||
<span class="badge-orange">补证建议</span>
|
||
<ul style="font-size:13px;margin:6px 0 0;padding-left:20px;line-height:1.8;">
|
||
<li>补充对批次操作员、班组长的询问笔录</li>
|
||
<li>调取MES系统原始操作日志作为电子证据补充</li>
|
||
<li>完善成品放行审核记录，补充QA签字确认环节</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<span class="badge-blue">链路评估</span>
|
||
<span style="font-size:13px;margin-left:8px;">当前证据链完整度63%，建议补充至85%以上方可移送审查</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab3: 裁量计算 -->
|
||
<div data-tab-content="discretion" style="margin-top:20px;display:none;">
|
||
<div class="grid-1-2">
|
||
<div>
|
||
<div class="form-group">
|
||
<label class="form-label">违法情节</label>
|
||
<select class="form-select" id="discretion-level">
|
||
<option value="轻微">轻微</option>
|
||
<option value="一般" selected>一般</option>
|
||
<option value="严重">严重</option>
|
||
<option value="特别严重">特别严重</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">违法所得（元）</label>
|
||
<input class="form-input" id="discretion-income" type="number" value="580000" placeholder="请输入违法所得金额">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">是否首犯</label>
|
||
<div style="display:flex;gap:16px;margin-top:8px;">
|
||
<label style="font-size:14px;cursor:pointer;"><input type="radio" name="first-offense" value="是" checked> 是</label>
|
||
<label style="font-size:14px;cursor:pointer;"><input type="radio" name="first-offense" value="否"> 否</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">整改情况</label>
|
||
<select class="form-select" id="discretion-rectification">
|
||
<option value="未整改">未整改</option>
|
||
<option value="整改中" selected>整改中</option>
|
||
<option value="已整改">已整改</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-primary" id="btn-calc-discretion">计算裁量</button>
|
||
</div>
|
||
|
||
<div id="discretion-result" style="display:none;">
|
||
<div class="card" style="background:rgba(22,119,255,0.04);">
|
||
<div class="card-body">
|
||
<div class="card-title"><span class="ct-icon">🤖</span>裁量计算结果 <span class="ai-label">AI辅助</span></div>
|
||
<div style="margin-top:12px;">
|
||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||
<div style="flex:1;padding:12px;background:rgba(255,77,79,0.08);border-radius:8px;text-align:center;">
|
||
<div style="font-size:12px;color:var(--text-secondary);">裁量等级</div>
|
||
<div style="font-size:20px;font-weight:700;color:#ff4d4f;margin-top:4px;">较重</div>
|
||
</div>
|
||
<div style="flex:1;padding:12px;background:rgba(250,140,22,0.08);border-radius:8px;text-align:center;">
|
||
<div style="font-size:12px;color:var(--text-secondary);">罚款金额范围</div>
|
||
<div style="font-size:16px;font-weight:700;color:#fa8c16;margin-top:4px;">87万-145万</div>
|
||
</div>
|
||
</div>
|
||
<strong style="font-size:13px;">法律依据</strong>
|
||
<p style="font-size:13px;margin:6px 0 12px;line-height:1.6;">《药品管理法》第一百二十四条：并处违法生产、销售药品货值金额十五倍以上三十倍以下的罚款。</p>
|
||
<strong style="font-size:13px;">裁量因子分析</strong>
|
||
<table style="margin-top:8px;">
|
||
<thead>
|
||
<tr><th>因子</th><th>取值</th><th>影响</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>违法情节</td><td>一般</td><td><span class="badge-orange">基准</span></td></tr>
|
||
<tr><td>违法所得</td><td>58万元</td><td><span class="badge-orange">上浮</span></td></tr>
|
||
<tr><td>是否首犯</td><td>是</td><td><span class="badge-green">下浮</span></td></tr>
|
||
<tr><td>整改情况</td><td>整改中</td><td><span class="badge-blue">中性</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="discretion-empty" style="display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:13px;">点击"计算裁量"获取结果</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab4: 类案校验 -->
|
||
<div data-tab-content="similar" style="margin-top:20px;display:none;">
|
||
<div class="card-title"><span class="ct-icon">📊</span>类案对比 <span class="ai-label">AI辅助</span></div>
|
||
<table style="margin-top:12px;">
|
||
<thead>
|
||
<tr>
|
||
<th>案件名称</th>
|
||
<th>违法情节</th>
|
||
<th>处罚结果</th>
|
||
<th>相似度</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>江苏AA药业生产记录造假案（2025）</td>
|
||
<td>伪造批生产记录</td>
|
||
<td>罚款120万，吊销许可证</td>
|
||
<td><div class="progress" style="width:120px;"><div class="progress-bar red" style="width:92%;"></div></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>山东BB制药数据完整性违规案（2025）</td>
|
||
<td>删除电子数据</td>
|
||
<td>罚款95万，警告</td>
|
||
<td><div class="progress" style="width:120px;"><div class="progress-bar orange" style="width:85%;"></div></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>河北CC药业记录造假案（2024）</td>
|
||
<td>篡改检验数据</td>
|
||
<td>罚款78万，责令停产</td>
|
||
<td><div class="progress" style="width:120px;"><div class="progress-bar blue" style="width:78%;"></div></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>四川DD药业GMP违规案（2024）</td>
|
||
<td>未按GMP组织生产</td>
|
||
<td>罚款60万，警告</td>
|
||
<td><div class="progress" style="width:120px;"><div class="progress-bar blue" style="width:65%;"></div></div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="card" style="background:rgba(255,77,79,0.04);margin-top:16px;">
|
||
<div class="card-body">
|
||
<div class="card-title"><span class="ct-icon">🤖</span>AI对比分析</div>
|
||
<div style="margin-top:12px;">
|
||
<p style="font-size:13px;line-height:1.7;margin:0 0 12px;">本案与类案平均处罚水平对比，违法情节相似度达85%。类案平均罚款金额约为88万元，本案裁量计算结果（87万-145万）处于合理区间。</p>
|
||
<div style="padding:10px;background:rgba(250,140,22,0.1);border-radius:6px;">
|
||
<span class="badge-orange">偏差预警</span>
|
||
<span style="font-size:13px;margin-left:8px;">本案裁量上限（145万）高于类案最高值（120万），建议复核违法所得计算基数及裁量因子权重，确保裁量公正。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIEW: Risk -->
|
||
<div class="view" id="view-risk">
|
||
<div class="page-header">
|
||
<h1 class="page-title">风险预警智能研判</h1>
|
||
<p class="page-desc">多源融合 · 复合评分 · 分级预警 · 闭环处置</p>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="stat-grid" style="grid-template-columns:repeat(3,1fr);">
|
||
<div class="stat-card fade-in" style="border-left:4px solid #ff4d4f;">
|
||
<div class="stat-icon" style="color:#ff4d4f;">🔴</div>
|
||
<div class="stat-num" style="color:#ff4d4f;">3</div>
|
||
<div class="stat-label">红色预警（家）</div>
|
||
</div>
|
||
<div class="stat-card fade-in" style="border-left:4px solid #fa8c16;">
|
||
<div class="stat-icon" style="color:#fa8c16;">🟠</div>
|
||
<div class="stat-num" style="color:#fa8c16;">12</div>
|
||
<div class="stat-label">橙色预警（家）</div>
|
||
</div>
|
||
<div class="stat-card fade-in" style="border-left:4px solid #1677ff;">
|
||
<div class="stat-icon" style="color:#1677ff;">🔵</div>
|
||
<div class="stat-num" style="color:#1677ff;">47</div>
|
||
<div class="stat-label">蓝色预警（家）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 企业风险预警列表 + 风险分布 -->
|
||
<div class="grid-2-1">
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<div class="card-title">
|
||
<span class="ct-icon">⚠️</span>企业风险预警列表
|
||
<span class="badge-red" style="margin-left:8px;">实时</span>
|
||
</div>
|
||
<table style="margin-top:12px;">
|
||
<thead>
|
||
<tr>
|
||
<th>企业名称</th>
|
||
<th>风险评分</th>
|
||
<th>风险等级</th>
|
||
<th>主要风险因子</th>
|
||
<th>预警时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>辽宁XX制药有限公司</td>
|
||
<td><span style="color:#ff4d4f;font-weight:700;">92.5</span></td>
|
||
<td><span class="badge-red">红色</span></td>
|
||
<td>生产记录异常、数据完整性</td>
|
||
<td>2026-06-28 09:12</td>
|
||
<td>
|
||
<button class="btn btn-ghost btn-sm" onclick="showToast('查看企业风险详情','info')">详情</button>
|
||
<button class="btn btn-primary btn-sm" onclick="dispatchInspection('辽宁XX制药有限公司')">派单</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>沈阳YY药业股份有限公司</td>
|
||
<td><span style="color:#ff4d4f;font-weight:700;">88.3</span></td>
|
||
<td><span class="badge-red">红色</span></td>
|
||
<td>质量问题、检验数据异常</td>
|
||
<td>2026-06-28 08:45</td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showToast('查看企业风险详情','info')">查看详情</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>大连ZZ生物科技有限公司</td>
|
||
<td><span style="color:#ff4d4f;font-weight:700;">85.7</span></td>
|
||
<td><span class="badge-red">红色</span></td>
|
||
<td>经营违规、冷链断裂</td>
|
||
<td>2026-06-27 16:30</td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showToast('查看企业风险详情','info')">查看详情</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>鞍山AA制药集团</td>
|
||
<td><span style="color:#fa8c16;font-weight:700;">76.2</span></td>
|
||
<td><span class="badge-orange">橙色</span></td>
|
||
<td>生产违规、人员资质不足</td>
|
||
<td>2026-06-27 14:20</td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showToast('查看企业风险详情','info')">查看详情</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>抚顺BB医药有限公司</td>
|
||
<td><span style="color:#fa8c16;font-weight:700;">71.8</span></td>
|
||
<td><span class="badge-orange">橙色</span></td>
|
||
<td>经营违规、仓储超标</td>
|
||
<td>2026-06-27 10:08</td>
|
||
<td><button class="btn btn-ghost btn-sm" onclick="showToast('查看企业风险详情','info')">查看详情</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<div class="card-title">
|
||
<span class="ct-icon">📊</span>风险分布
|
||
</div>
|
||
|
||
<strong style="font-size:13px;margin-top:16px;display:block;">风险类型分布</strong>
|
||
<div style="margin-top:10px;">
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;">
|
||
<span>生产违规</span><span>45%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar red" style="width:45%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;">
|
||
<span>经营违规</span><span>28%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar orange" style="width:28%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;">
|
||
<span>质量问题</span><span>15%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar blue" style="width:15%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:0;">
|
||
<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;">
|
||
<span>其他</span><span>12%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar green" style="width:12%;"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<strong style="font-size:13px;margin-top:20px;display:block;">区域分布</strong>
|
||
<div style="margin-top:10px;">
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;">
|
||
<span>沈阳</span><span>32%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar teal" style="width:32%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;">
|
||
<span>大连</span><span>24%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar teal" style="width:24%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;">
|
||
<span>鞍山</span><span>18%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar teal" style="width:18%;"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:0;">
|
||
<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;">
|
||
<span>其他</span><span>26%</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar teal" style="width:26%;"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预警处置流程 -->
|
||
<div class="card slide-in">
|
||
<div class="card-body">
|
||
<div class="card-title">
|
||
<span class="ct-icon">🔄</span>预警处置流程
|
||
<span style="font-size:13px;color:var(--text-secondary);margin-left:8px;font-weight:400;">案例：辽宁XX制药有限公司 · 红色预警</span>
|
||
</div>
|
||
<div class="timeline" style="margin-top:20px;">
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">06-28 09:12</div>
|
||
<div class="timeline-content">
|
||
<strong>风险识别 <span class="badge-red">AI自动</span></strong>
|
||
<p>系统通过多源数据融合分析，识别该企业生产记录异常，复合风险评分92.5，触发红色预警。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">06-28 09:15</div>
|
||
<div class="timeline-content">
|
||
<strong>自动派单 <span class="badge-blue">系统</span></strong>
|
||
<p>系统根据风险等级与区域自动派单至沈阳市药品检查中心，指定主检查员张明。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">06-28 09:22</div>
|
||
<div class="timeline-content">
|
||
<strong>检查员接收 <span class="badge-green">已接收</span></strong>
|
||
<p>检查员张明通过移动端接收任务，AI已同步生成飞行检查方案。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">06-28 14:30</div>
|
||
<div class="timeline-content">
|
||
<strong>现场核查 <span class="badge-orange">进行中</span></strong>
|
||
<p>检查组抵达企业开展现场核查，使用AI现场研判助手辅助取证，已发现3项重点问题。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">待处理</div>
|
||
<div class="timeline-content">
|
||
<strong>处置反馈 <span class="badge-gray">待执行</span></strong>
|
||
<p>待现场核查完成后，提交处置反馈意见。</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">待处理</div>
|
||
<div class="timeline-content">
|
||
<strong>闭环确认 <span class="badge-gray">待执行</span></strong>
|
||
<p>风险处置完成后由系统确认闭环，更新企业风险评分。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- VIEW: Legalqa -->
|
||
<div class="view" id="view-legalqa">
|
||
<div class="page-header">
|
||
<h1 class="page-title">法规智能问答</h1>
|
||
<p class="page-desc">RAG检索增强·答案可溯源至具体法规条款 <span class="ai-label">AI辅助</span></p>
|
||
</div>
|
||
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<div class="chat-container">
|
||
<div class="chat-messages" id="legalqaMessages">
|
||
<div class="chat-msg ai">
|
||
<div class="msg-avatar">AI</div>
|
||
<div class="msg-bubble">
|
||
您好，我是法规智能问答助手。我可以基于药品监管相关法律法规（含《药品管理法》《药品生产质量管理规范》《药品经营质量管理规范》《药品注册管理办法》等）为您提供精准解答，所有回答均可溯源至具体法规条款。请输入您的问题。
|
||
</div>
|
||
</div>
|
||
<div class="chat-msg user">
|
||
<div class="msg-avatar">我</div>
|
||
<div class="msg-bubble">GMP认证检查中，发现企业未建立偏差处理程序，应如何处理？</div>
|
||
</div>
|
||
<div class="chat-msg ai">
|
||
<div class="msg-avatar">AI</div>
|
||
<div class="msg-bubble">
|
||
针对GMP认证检查中发现企业未建立偏差处理程序的问题，依据现行法规应作如下处理：
|
||
<br><br>
|
||
<b>一、问题定性</b><br>
|
||
未建立偏差处理程序属于质量管理体系重大缺陷。偏差处理是GMP质量管理的核心环节，缺失该程序意味着企业无法对生产过程中出现的偏离既定程序的情况进行系统化调查、记录和纠正，直接影响产品质量的可追溯性和持续改进能力。
|
||
<br><br>
|
||
<b>二、法规依据</b><br>
|
||
根据《药品生产质量管理规范》要求，质量管理部门应建立偏差处理程序，所有偏差均应按书面程序进行处理。
|
||
<br><br>
|
||
<b>三、处理建议</b><br>
|
||
1. 检查组应在现场检查报告中如实记录该缺陷项，评定为<span class="badge-red">严重缺陷</span>；<br>
|
||
2. 责令企业限期整改，整改期限一般不超过30日；<br>
|
||
3. 企业应建立完整的偏差处理SOP，涵盖偏差识别、分级、调查、纠正与预防措施（CAPA）、关闭与回顾全流程；<br>
|
||
4. 整改完成后提交整改报告，经现场复核通过方可通过GMP认证。
|
||
<div class="msg-source">
|
||
<b>来源：</b><br>
|
||
《药品生产质量管理规范》第250条："质量管理部门应建立偏差处理程序，对所有偏离既定程序的情况进行记录、调查和处理。"<br>
|
||
《药品生产质量管理规范》第251条："偏差应按书面程序处理，相关记录应予保存，确保偏差情况可追溯。"
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding:10px 0;border-top:1px solid var(--border,#e5e7eb);">
|
||
<div style="margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;">
|
||
<span class="tag-blue legalqa-quick" style="cursor:pointer;" data-q="药品经营许可证换证需要什么材料？">药品经营许可证换证需要什么材料？</span>
|
||
<span class="tag-blue legalqa-quick" style="cursor:pointer;" data-q="飞行检查中发现数据完整性问题如何定性？">飞行检查中发现数据完整性问题如何定性？</span>
|
||
<span class="tag-blue legalqa-quick" style="cursor:pointer;" data-q="行政处罚裁量中'情节严重'如何认定？">行政处罚裁量中"情节严重"如何认定？</span>
|
||
</div>
|
||
<div class="chat-input">
|
||
<input type="text" id="legalqaInput" placeholder="请输入您的法规问题，如：GMP认证检查中偏差处理程序缺失如何处理？">
|
||
<button class="btn btn-primary" id="legalqaSend">发送</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIEW: Document -->
|
||
<div class="view" id="view-document">
|
||
<div class="page-header">
|
||
<h1 class="page-title">监管文书智能生成</h1>
|
||
<p class="page-desc">模板驱动·AI填充·法规挂载·要素校验 <span class="ai-label">AI辅助</span></p>
|
||
</div>
|
||
|
||
<div class="grid-1-2">
|
||
<!-- 左侧：文书配置 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">⚙</span>文书配置</h3>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">文书类型</label>
|
||
<select class="form-select" id="doc-type">
|
||
<option value="inspection">现场检查报告</option>
|
||
<option value="penalty">行政处罚决定书</option>
|
||
<option value="rectify">责令改正通知书</option>
|
||
<option value="transfer">案件移送函</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">关联企业</label>
|
||
<select class="form-select" id="doc-company">
|
||
<option>辽宁XX制药有限公司</option>
|
||
<option>沈阳YY药业股份有限公司</option>
|
||
<option>大连ZZ生物科技有限公司</option>
|
||
<option>鞍山AA制药集团</option>
|
||
<option>抚顺BB医药有限公司</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">文书标题</label>
|
||
<input type="text" class="form-input" id="doc-title" value="药品GMP认证现场检查报告">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">关键要素</label>
|
||
<textarea class="form-textarea" id="doc-elements" rows="4" placeholder="请输入检查时间、检查范围、发现问题等关键要素...">检查时间：2026年6月15日-6月17日；检查范围：固体口服制剂车间；主要问题：偏差处理程序缺失、洁净区环境监测数据不完整、部分批次批生产记录未及时审核签字。</textarea>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" id="btn-gen-doc" style="width:100%;">生成文书</button>
|
||
|
||
<div style="margin-top:20px;">
|
||
<label class="form-label">快捷模板</label>
|
||
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;">
|
||
<span class="tag-blue doc-tpl-card" style="cursor:pointer;" data-tpl="现场检查报告">现场检查报告模板</span>
|
||
<span class="tag-blue doc-tpl-card" style="cursor:pointer;" data-tpl="行政处罚决定书">行政处罚决定书模板</span>
|
||
<span class="tag-blue doc-tpl-card" style="cursor:pointer;" data-tpl="责令改正通知书">责令改正通知书模板</span>
|
||
<span class="tag-blue doc-tpl-card" style="cursor:pointer;" data-tpl="案件移送函">案件移送函模板</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：文书预览 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">📄</span>文书预览 <span class="ai-label">AI辅助</span></h3>
|
||
|
||
<div id="doc-preview" style="padding:40px 20px;text-align:center;color:#9ca3af;">
|
||
<div style="font-size:48px;margin-bottom:12px;">📋</div>
|
||
<p>请在左侧选择文书类型并填写关键要素，点击生成文书</p>
|
||
</div>
|
||
|
||
<div id="docLoading" style="display:none;text-align:center;padding:60px 20px;">
|
||
<div class="ai-label" style="font-size:16px;">AI 生成中...</div>
|
||
<div style="font-size:13px;color:#888;margin-top:8px;">正在检索法规知识库并生成文书</div>
|
||
</div>
|
||
|
||
<div id="doc-result" style="display:none;">
|
||
<div style="text-align:center;border-bottom:2px solid #e5e7eb;padding-bottom:16px;margin-bottom:16px;">
|
||
<h2 id="docResultTitle" style="margin:0 0 8px;font-size:20px;">药品GMP认证现场检查报告</h2>
|
||
<p style="margin:0;color:#6b7280;font-size:14px;">文号：<span id="docNum">辽药监检字〔2026〕第0317号</span></p>
|
||
</div>
|
||
|
||
<div style="line-height:1.9;font-size:14px;">
|
||
<p><b>一、检查基本情况</b><br>
|
||
根据辽宁省药品监督管理局年度检查计划，检查组于2026年6月15日至6月17日对辽宁XX制药有限公司固体口服制剂车间进行GMP认证现场检查。检查组由3名GMP检查员组成，依据《药品生产质量管理规范》（2010年修订）及相关附录开展检查工作。</p>
|
||
|
||
<p><b>二、检查发现的主要问题</b><br>
|
||
1. 企业未建立偏差处理程序，质量管理体系存在重大缺陷；<br>
|
||
2. 洁净区环境监测数据存在选择性记录现象，部分异常数据未纳入趋势分析；<br>
|
||
3. 3个批次（批号20260401、20260402、20260403）批生产记录未在规定时限内完成审核签字。</p>
|
||
|
||
<p><b>三、问题分析及法规依据</b><br>
|
||
上述问题违反《药品生产质量管理规范》第250条、第251条（偏差处理）、第158条（数据完整性）、第184条（批生产记录审核）相关规定，其中偏差处理程序缺失评定为严重缺陷，其余评定为主要缺陷。</p>
|
||
|
||
<p><b>四、处理意见</b><br>
|
||
1. 偏差处理程序缺失项评定为严重缺陷，不予通过本次GMP认证；<br>
|
||
2. 责令企业自收到本报告之日起30日内完成整改并提交整改报告；<br>
|
||
3. 整改完成后申请现场复核，复核通过后方可重新评定。</p>
|
||
|
||
<p><b>五、整改要求</b><br>
|
||
企业应建立完整的偏差处理SOP，开展全员数据完整性培训，完善批生产记录审核流程，并对历史偏差进行回顾性评估。整改报告应附相关证明材料，经质量负责人签字后报送。</p>
|
||
</div>
|
||
|
||
<div style="margin-top:20px;border-top:1px solid #e5e7eb;padding-top:16px;">
|
||
<h4 style="margin:0 0 12px;font-size:15px;">要素完整性校验</h4>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">文书标题与文号</div>
|
||
<div class="ci-desc">已填写完整，文号格式规范</div>
|
||
</div>
|
||
<div class="ci-priority">已通过</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">被检查企业信息</div>
|
||
<div class="ci-desc">企业名称、许可证号、地址信息完整</div>
|
||
</div>
|
||
<div class="ci-priority">已通过</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">检查依据法规</div>
|
||
<div class="ci-desc">已引用GMP相关条款</div>
|
||
</div>
|
||
<div class="ci-priority">已通过</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">检查组成员签名</div>
|
||
<div class="ci-desc">3名检查员信息已列入</div>
|
||
</div>
|
||
<div class="ci-priority">已通过</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">企业陈述申辩记录</div>
|
||
<div class="ci-desc">待补充企业对检查结论的申辩意见</div>
|
||
</div>
|
||
<div class="ci-priority">待补</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:16px;background:#f0f9ff;border-left:3px solid #0ea5e9;padding:12px;border-radius:4px;">
|
||
<b style="font-size:13px;">挂载法规条款：</b>
|
||
<div style="margin-top:6px;font-size:13px;line-height:1.7;">
|
||
· 《药品生产质量管理规范》第250条、第251条 — 偏差处理程序要求<br>
|
||
· 《药品生产质量管理规范》第158条 — 数据完整性ALCOA+原则
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:16px;display:flex;gap:10px;">
|
||
<button class="btn btn-ghost" style="flex:1;" onclick="showToast('文书已导出为Word文档','success')">导出Word</button>
|
||
<button class="btn btn-teal" style="flex:1;" onclick="showToast('已提交人工复核流程','info')">人工复核</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIEW: Profile -->
|
||
<div class="view" id="view-profile">
|
||
<div class="page-header">
|
||
<h1 class="page-title">企业全景画像</h1>
|
||
<p class="page-desc">多维聚合·信用评分·轨迹追踪·关联识别</p>
|
||
</div>
|
||
|
||
<div class="card fade-in" style="margin-bottom:20px;">
|
||
<div class="card-body" style="display:flex;gap:12px;align-items:center;">
|
||
<input type="text" class="form-input" id="profile-search" placeholder="输入企业名称或许可证号搜索，如：辽宁XX制药有限公司" style="flex:1;">
|
||
<button class="btn btn-primary" onclick="searchProfile()">搜索</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="profile-header fade-in">
|
||
<div class="profile-avatar">辽</div>
|
||
<div class="profile-info">
|
||
<h2 style="margin:0 0 6px;">辽宁XX制药有限公司</h2>
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:#6b7280;">
|
||
<span>许可证号：辽20190001</span>
|
||
<span>统一社会信用代码：91210100MA1234ABCD</span>
|
||
<span>所属地市：沈阳市</span>
|
||
<span>行业类别：化学药品制剂制造</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<!-- 信用评分 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">★</span>企业信用评分</h3>
|
||
<div style="display:flex;justify-content:center;padding:10px 0;">
|
||
<svg width="160" height="160" viewBox="0 0 160 160">
|
||
<circle cx="80" cy="80" r="60" fill="none" stroke="#e5e7eb" stroke-width="12"/>
|
||
<circle cx="80" cy="80" r="60" fill="none" stroke="#3b82f6" stroke-width="12" stroke-linecap="round" stroke-dasharray="294 377" transform="rotate(-90 80 80)"/>
|
||
<text x="80" y="76" text-anchor="middle" font-size="36" font-weight="bold" fill="#3b82f6">78</text>
|
||
<text x="80" y="100" text-anchor="middle" font-size="13" fill="#6b7280">信用分</text>
|
||
</svg>
|
||
</div>
|
||
<div style="text-align:center;margin-bottom:16px;">
|
||
信用等级：<span class="badge-blue">B级</span>
|
||
<span style="margin-left:8px;font-size:12px;color:#9ca3af;">（评估周期：2026年上半年）</span>
|
||
</div>
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:8px 4px;">检查合规率</td>
|
||
<td style="width:120px;">
|
||
<div class="progress"><div class="progress-bar green" style="width:85%"></div></div>
|
||
</td>
|
||
<td style="text-align:right;font-weight:600;">85%</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:8px 4px;">整改完成率</td>
|
||
<td><div class="progress"><div class="progress-bar green" style="width:90%"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">90%</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:8px 4px;">处罚记录</td>
|
||
<td><div class="progress"><div class="progress-bar orange" style="width:40%" id="pb2"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">2次</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:8px 4px;">投诉举报</td>
|
||
<td><div class="progress"><div class="progress-bar orange" style="width:30%" id="pb4"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">3次</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 基本信息 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">ℹ</span>企业基本信息</h3>
|
||
<table>
|
||
<tbody>
|
||
<tr><td style="padding:10px 4px;color:#6b7280;width:120px;">法定代表人</td><td style="font-weight:500;">张某某</td></tr>
|
||
<tr><td style="padding:10px 4px;color:#6b7280;">注册地址</td><td style="font-weight:500;">沈阳市沈北新区辉山大街123号</td></tr>
|
||
<tr><td style="padding:10px 4px;color:#6b7280;">生产范围</td><td style="font-weight:500;">片剂、胶囊剂、颗粒剂（化学药品）</td></tr>
|
||
<tr><td style="padding:10px 4px;color:#6b7280;">经营方式</td><td style="font-weight:500;">药品生产</td></tr>
|
||
<tr><td style="padding:10px 4px;color:#6b7280;">许可证有效期</td><td style="font-weight:500;">2027年12月31日</td></td></tr>
|
||
<tr><td style="padding:10px 4px;color:#6b7280;">员工数</td><td style="font-weight:500;">286人（其中QA 18人、QC 22人）</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<!-- 监管历史 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">⏱</span>监管历史时间线</h3>
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">2024-03</div>
|
||
<div class="timeline-content">
|
||
<b>许可审批</b> — 药品生产许可证换证获批 <span class="badge-green">通过</span>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">2024-07</div>
|
||
<div class="timeline-content">
|
||
<b>日常检查</b> — 固体制剂车间常规检查，发现一般缺陷3项 <span class="badge-blue">已整改</span>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">2024-11</div>
|
||
<div class="timeline-content">
|
||
<b>飞行检查</b> — 突击检查，发现偏差处理程序不完善 <span class="badge-orange">限期整改</span>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">2026-01</div>
|
||
<div class="timeline-content">
|
||
<b>整改通知</b> — 下发责令改正通知书，整改期限30日 <span class="badge-blue">已提交</span>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">2026-04</div>
|
||
<div class="timeline-content">
|
||
<b>行政处罚</b> — 因数据完整性问题处以警告并罚款5万元 <span class="badge-red">已执行</span>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">2026-06</div>
|
||
<div class="timeline-content">
|
||
<b>投诉处理</b> — 接到产品异物投诉3起，已调查处理 <span class="badge-gray">处理中</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关联关系图谱 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">⊞</span>关联关系图谱</h3>
|
||
<div class="rel-graph" style="height:340px;position:relative;">
|
||
<div class="rel-node center" style="top:50%;left:50%;transform:translate(-50%,-50%);">辽宁XX制药</div>
|
||
<div class="rel-node satellite" style="top:8%;left:50%;transform:translate(-50%,0);">法定代表人<br>张某某</div>
|
||
<div class="rel-node satellite" style="top:30%;left:88%;transform:translate(-50%,0);">关联企业<br>沈阳YY药业</div>
|
||
<div class="rel-node satellite" style="top:72%;left:88%;transform:translate(-50%,0);">供应商<br>A公司</div>
|
||
<div class="rel-node satellite" style="top:92%;left:50%;transform:translate(-50%,0);">主导产品<br>头孢类</div>
|
||
<div class="rel-node satellite" style="top:72%;left:12%;transform:translate(-50%,0);">历史处罚<br>2次</div>
|
||
<svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||
<line x1="50" y1="50" x2="50" y2="14" stroke="#cbd5e1" stroke-width="0.4" stroke-dasharray="2,1"/>
|
||
<line x1="50" y1="50" x2="86" y2="36" stroke="#cbd5e1" stroke-width="0.4" stroke-dasharray="2,1"/>
|
||
<line x1="50" y1="50" x2="86" y2="78" stroke="#cbd5e1" stroke-width="0.4" stroke-dasharray="2,1"/>
|
||
<line x1="50" y1="50" x2="50" y2="92" stroke="#cbd5e1" stroke-width="0.4" stroke-dasharray="2,1"/>
|
||
<line x1="50" y1="50" x2="14" y2="78" stroke="#cbd5e1" stroke-width="0.4" stroke-dasharray="2,1"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮区 -->
|
||
<div class="card fade-in" style="margin-top:20px;">
|
||
<div class="card-body" style="display:flex;gap:12px;flex-wrap:wrap;">
|
||
<button class="btn btn-primary" onclick="dispatchInspection('辽宁XX制药有限公司')">派单飞行检查</button>
|
||
<button class="btn btn-teal" onclick="showView('investigation')">发起稽查立案</button>
|
||
<button class="btn btn-ghost" onclick="navigateToDoc('inspection')">生成检查报告</button>
|
||
<button class="btn btn-ghost" onclick="showToast('已导出企业画像报告','success')">导出画像</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 风险因子分析 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">⚠</span>风险因子分析</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left;padding:10px 8px;">风险维度</th>
|
||
<th style="text-align:left;width:200px;">评分</th>
|
||
<th style="text-align:right;width:80px;">得分</th>
|
||
<th style="text-align:right;width:100px;">风险等级</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:10px 8px;">生产合规</td>
|
||
<td><div class="progress"><div class="progress-bar orange" style="width:70%"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">70</td>
|
||
<td style="text-align:right;"><span class="badge-orange">中风险</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 8px;">质量控制</td>
|
||
<td><div class="progress"><div class="progress-bar red" style="width:55%"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">55</td>
|
||
<td style="text-align:right;"><span class="badge-red">高风险</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 8px;">人员管理</td>
|
||
<td><div class="progress"><div class="progress-bar green" style="width:82%"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">82</td>
|
||
<td style="text-align:right;"><span class="badge-green">低风险</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 8px;">文件管理</td>
|
||
<td><div class="progress"><div class="progress-bar orange" style="width:68%"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">68</td>
|
||
<td style="text-align:right;"><span class="badge-orange">中风险</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 8px;">数据完整性</td>
|
||
<td><div class="progress"><div class="progress-bar red" style="width:48%"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">48</td>
|
||
<td style="text-align:right;"><span class="badge-red">高风险</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 8px;">设施设备</td>
|
||
<td><div class="progress"><div class="progress-bar green" style="width:85%"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">85</td>
|
||
<td style="text-align:right;"><span class="badge-green">低风险</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 8px;">物料管理</td>
|
||
<td><div class="progress"><div class="progress-bar blue" style="width:76%"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">76</td>
|
||
<td style="text-align:right;"><span class="badge-blue">中低</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 8px;">投诉反馈</td>
|
||
<td><div class="progress"><div class="progress-bar orange" style="width:62%"></div></div></td>
|
||
<td style="text-align:right;font-weight:600;">62</td>
|
||
<td style="text-align:right;"><span class="badge-orange">中风险</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIEW: Ent-Home -->
|
||
<div class="view" id="view-ent-home">
|
||
<div class="page-header">
|
||
<h1 class="page-title">企业工作台</h1>
|
||
<p class="page-desc">欢迎使用药企知识助手</p>
|
||
</div>
|
||
|
||
<div class="card fade-in">
|
||
<div class="card-body" style="display:flex;align-items:center;gap:20px;flex-wrap:wrap;">
|
||
<div style="display:flex;align-items:center;gap:10px;">
|
||
<div class="profile-avatar" style="width:44px;height:44px;font-size:18px;">沈</div>
|
||
<div>
|
||
<div style="font-weight:600;font-size:16px;">沈阳YY药业股份有限公司</div>
|
||
<div style="font-size:12px;color:#9ca3af;">许可证号：辽20200012</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<span style="color:#6b7280;font-size:13px;">信用等级：</span>
|
||
<span class="badge-blue">B级</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<span style="color:#6b7280;font-size:13px;">许可证状态：</span>
|
||
<span class="badge-green">有效</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px;margin-left:auto;">
|
||
<span style="color:#6b7280;font-size:13px;">到期日：2027年12月31日</span>
|
||
<span class="badge-green">剩余551天</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-grid" style="grid-template-columns:repeat(3,1fr);">
|
||
<div class="stat-card fade-in">
|
||
<div class="stat-icon" style="background:#eff6ff;color:#3b82f6;">📚</div>
|
||
<div>
|
||
<div class="stat-num">23</div>
|
||
<div class="stat-label">本月法规更新</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card fade-in">
|
||
<div class="stat-icon" style="background:#fff7ed;color:#f97316;">📋</div>
|
||
<div>
|
||
<div class="stat-num">5</div>
|
||
<div class="stat-label">待办合规事项</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card fade-in">
|
||
<div class="stat-icon" style="background:#f0fdf4;color:#22c55e;">🎓</div>
|
||
<div>
|
||
<div class="stat-num">78%</div>
|
||
<div class="stat-label">培训完成率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<!-- 合规待办 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">✓</span>合规待办事项</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left;padding:8px 6px;">事项名称</th>
|
||
<th style="text-align:left;">类型</th>
|
||
<th>截止日期</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:10px 6px;">药品生产许可证延续申请</td>
|
||
<td><span class="tag-teal">许可事项</span></td>
|
||
<td style="text-align:center;">2025-07-15</td>
|
||
<td style="text-align:center;"><span class="badge-red">紧急</span></td>
|
||
<td style="text-align:center;"><button class="btn btn-sm btn-primary" onclick="showToast('正在办理合规事项...','info')">办理</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">GMP自检报告提交</td>
|
||
<td><span class="tag-blue">自检</span></td>
|
||
<td style="text-align:center;">2025-07-30</td>
|
||
<td style="text-align:center;"><span class="badge-orange">进行中</span></td>
|
||
<td style="text-align:center;"><button class="btn btn-sm btn-primary" onclick="showToast('正在办理合规事项...','info')">办理</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">偏差处理SOP修订</td>
|
||
<td><span class="tag-gold">文件</span></td>
|
||
<td style="text-align:center;">2025-08-10</td>
|
||
<td style="text-align:center;"><span class="badge-blue">待开始</span></td>
|
||
<td style="text-align:center;"><button class="btn btn-sm btn-primary" onclick="showToast('正在办理合规事项...','info')">办理</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">数据完整性专项培训</td>
|
||
<td><span class="tag-teal">培训</span></td>
|
||
<td style="text-align:center;">2025-08-20</td>
|
||
<td style="text-align:center;"><span class="badge-blue">待开始</span></td>
|
||
<td style="text-align:center;"><button class="btn btn-sm btn-primary" onclick="showToast('正在办理合规事项...','info')">办理</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">供应商年度审计报告</td>
|
||
<td><span class="tag-gold">审计</span></td>
|
||
<td style="text-align:center;">2025-09-01</td>
|
||
<td style="text-align:center;"><span class="badge-gray">未开始</span></td>
|
||
<td style="text-align:center;"><button class="btn btn-sm btn-primary" onclick="showToast('正在办理合规事项...','info')">办理</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 知识库快捷入口 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">📖</span>知识库快捷入口</h3>
|
||
<div style="display:flex;flex-direction:column;gap:14px;">
|
||
<div class="stat-card" style="cursor:pointer;">
|
||
<div class="stat-icon" style="background:#eff6ff;color:#3b82f6;">⚖</div>
|
||
<div style="flex:1;">
|
||
<div style="font-weight:600;font-size:15px;">法规库</div>
|
||
<div style="font-size:13px;color:#9ca3af;">收录法规 <b style="color:#3b82f6;">1247</b> 条，含药品管理法、GMP、GSP等</div>
|
||
</div>
|
||
<button class="btn btn-sm btn-ghost" onclick="showToast('正在打开知识库...','info')">进入</button>
|
||
</div>
|
||
<div class="stat-card" style="cursor:pointer;">
|
||
<div class="stat-icon" style="background:#fff7ed;color:#f97316;">📑</div>
|
||
<div style="flex:1;">
|
||
<div style="font-weight:600;font-size:15px;">案例库</div>
|
||
<div style="font-size:13px;color:#9ca3af;">监管案例 <b style="color:#f97316;">356</b> 条，含处罚、检查、整改典型</div>
|
||
</div>
|
||
<button class="btn btn-sm btn-ghost" onclick="showToast('正在打开知识库...','info')">进入</button>
|
||
</div>
|
||
<div class="stat-card" style="cursor:pointer;">
|
||
<div class="stat-icon" style="background:#f0fdf4;color:#22c55e;">📝</div>
|
||
<div style="flex:1;">
|
||
<div style="font-weight:600;font-size:15px;">模板库</div>
|
||
<div style="font-size:13px;color:#9ca3af;">文书模板 <b style="color:#22c55e;">89</b> 个，含SOP、偏差报告、CAPA等</div>
|
||
</div>
|
||
<button class="btn btn-sm btn-ghost" onclick="showToast('正在打开知识库...','info')">进入</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最新法规动态 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">🔔</span>最新法规动态</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left;padding:8px 6px;">法规名称</th>
|
||
<th>发布机构</th>
|
||
<th>发布日期</th>
|
||
<th>影响等级</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:12px 6px;">《药品生产质量管理规范（修订征求意见稿）》</td>
|
||
<td style="text-align:center;">国家药监局</td>
|
||
<td style="text-align:center;">2026-06-20</td>
|
||
<td style="text-align:center;"><span class="badge-red">高</span></td>
|
||
<td style="text-align:center;"><button class="btn btn-sm btn-ghost" onclick="showToast('正在查看法规详情...','info')">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:12px 6px;">《关于进一步加强药品数据完整性管理的通知》</td>
|
||
<td style="text-align:center;">国家药监局</td>
|
||
<td style="text-align:center;">2026-06-12</td>
|
||
<td style="text-align:center;"><span class="badge-red">高</span></td>
|
||
<td style="text-align:center;"><button class="btn btn-sm btn-ghost" onclick="showToast('正在查看法规详情...','info')">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:12px 6px;">《药品上市后变更管理办法实施细则》</td>
|
||
<td style="text-align:center;">辽宁省药监局</td>
|
||
<td style="text-align:center;">2026-06-05</td>
|
||
<td style="text-align:center;"><span class="badge-orange">中</span></td>
|
||
<td style="text-align:center;"><button class="btn btn-sm btn-ghost" onclick="showToast('正在查看法规详情...','info')">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:12px 6px;">《药品抽样原则及程序（2025年版）》</td>
|
||
<td style="text-align:center;">国家药监局</td>
|
||
<td style="text-align:center;">2026-05-28</td>
|
||
<td style="text-align:center;"><span class="badge-blue">低</span></td>
|
||
<td style="text-align:center;"><button class="btn btn-sm btn-ghost" onclick="showToast('正在查看法规详情...','info')">查看</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIEW: Ent-Compliance -->
|
||
<div class="view" id="view-ent-compliance">
|
||
<div class="page-header">
|
||
<h1 class="page-title">合规导航</h1>
|
||
<p class="page-desc">GMP/GSP法规问答·申报材料审查·合规自查 <span class="ai-label">AI辅助</span></p>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<div class="tab active" data-tab="ent-qa">法规问答</div>
|
||
<div class="tab" data-tab="ent-review">申报审查</div>
|
||
<div class="tab" data-tab="ent-self">合规自查</div>
|
||
</div>
|
||
|
||
<!-- Tab1: 法规问答 -->
|
||
<div data-tab-content="ent-qa">
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<div class="chat-container">
|
||
<div class="chat-messages" id="entQaMessages">
|
||
<div class="chat-msg ai">
|
||
<div class="msg-avatar">AI</div>
|
||
<div class="msg-bubble">
|
||
您好，我是企业合规问答助手，专注GMP/GSP法规解读与企业实操指导。可针对企业实际场景提供合规建议，请描述您遇到的问题。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding:10px 0;border-top:1px solid var(--border,#e5e7eb);">
|
||
<div style="margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;">
|
||
<span class="tag-blue entqa-quick" style="cursor:pointer;" data-q="GMP洁净区环境监测频次有何要求？">GMP洁净区环境监测频次有何要求？</span>
|
||
<span class="tag-blue entqa-quick" style="cursor:pointer;" data-q="GSP温湿度记录保存期限是多久？">GSP温湿度记录保存期限是多久？</span>
|
||
<span class="tag-blue entqa-quick" style="cursor:pointer;" data-q="药品上市后变更分级如何判定？">药品上市后变更分级如何判定？</span>
|
||
</div>
|
||
<div class="chat-input">
|
||
<input type="text" id="entQaInput" placeholder="请输入合规问题...">
|
||
<button class="btn btn-primary" id="entQaSend">发送</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab2: 申报审查 -->
|
||
<div data-tab-content="ent-review" style="display:none;">
|
||
<div class="grid-2">
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">📤</span>申报材料上传</h3>
|
||
|
||
<div id="entUploadArea" style="border:2px dashed #d1d5db;border-radius:8px;padding:20px;text-align:center;margin-bottom:16px;cursor:pointer;">
|
||
<div style="font-size:32px;margin-bottom:8px;">📎</div>
|
||
<p style="margin:0 0 12px;color:#6b7280;">点击或拖拽文件上传申报材料</p>
|
||
<button class="btn btn-sm btn-ghost">选择文件</button>
|
||
</div>
|
||
<div id="entUploadedFiles" style="display:flex;flex-direction:column;gap:8px;margin-bottom:20px;"></div>
|
||
|
||
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">审查项目</label>
|
||
<select class="form-select" id="review-project">
|
||
<option>药品注册申报材料审查</option>
|
||
<option>GMP认证申报材料审查</option>
|
||
<option>药品生产许可证变更审查</option>
|
||
<option>药品再注册申报审查</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" id="btn-ai-review" style="width:100%;">AI审查</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">🔍</span>审查结果</h3>
|
||
|
||
<div id="review-placeholder" style="padding:40px 20px;text-align:center;color:#9ca3af;">
|
||
<div style="font-size:48px;margin-bottom:12px;">🔍</div>
|
||
<p>上传材料并选择审查项目后，点击AI审查</p>
|
||
</div>
|
||
|
||
<div id="review-result" style="display:none;">
|
||
<h4 style="margin:0 0 12px;">完整性检查</h4>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">药品注册申报表</div>
|
||
<div class="ci-desc">表格要素填写完整，签字盖章齐全</div>
|
||
</div>
|
||
<div class="ci-priority">已通过</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">生产工艺研究报告</div>
|
||
<div class="ci-desc">工艺流程图、关键工艺参数描述清晰</div>
|
||
</div>
|
||
<div class="ci-priority">已通过</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">质量标准</div>
|
||
<div class="ci-desc">符合现行版《中国药典》要求</div>
|
||
</div>
|
||
<div class="ci-priority">已通过</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">稳定性研究资料</div>
|
||
<div class="ci-desc">缺失长期稳定性考察数据（需补充）</div>
|
||
</div>
|
||
<div class="ci-priority high">必须补</div>
|
||
</div>
|
||
<div class="check-item">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">药理毒理研究资料</div>
|
||
<div class="ci-desc">建议补充非临床安全性评价摘要</div>
|
||
</div>
|
||
<div class="ci-priority">建议补</div>
|
||
</div>
|
||
|
||
<h4 style="margin:20px 0 10px;">合规性分析</h4>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left;padding:8px 6px;">审查项</th>
|
||
<th>结果</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:10px 6px;">申报表格式规范</td>
|
||
<td style="text-align:center;"><span class="badge-green">合格</span></td>
|
||
<td style="font-size:12px;color:#6b7280;">符合受理审查指南</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">工艺参数完整性</td>
|
||
<td style="text-align:center;"><span class="badge-green">合格</span></td>
|
||
<td style="font-size:12px;color:#6b7280;">关键参数已明确</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">稳定性数据</td>
|
||
<td style="text-align:center;"><span class="badge-red">不合格</span></td>
|
||
<td style="font-size:12px;color:#6b7280;">缺少长期稳定性数据</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">质量标准现行性</td>
|
||
<td style="text-align:center;"><span class="badge-green">合格</span></td>
|
||
<td style="font-size:12px;color:#6b7280;">符合2025版药典</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div style="margin-top:16px;background:#ecfdf5;border-left:3px solid #14b8a6;padding:14px;border-radius:4px;">
|
||
<b style="font-size:14px;">💡 AI建议</b>
|
||
<p style="margin:8px 0 0;font-size:13px;line-height:1.7;">
|
||
申报材料整体完整性较好，但存在2项需补充材料：1. <b>稳定性研究资料</b>需补充至少3个批次的长期稳定性考察数据（25℃±2℃，考察期12个月以上）；2. 建议补充<b>非临床安全性评价摘要</b>以完善药理毒理部分。建议在提交前完成上述补充，可提高受理通过率。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab3: 合规自查 -->
|
||
<div data-tab-content="ent-self" style="display:none;">
|
||
<div class="grid-2-1">
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">✓</span>合规自查清单</h3>
|
||
|
||
<div class="form-group" style="margin-bottom:16px;">
|
||
<label class="form-label">自查模板</label>
|
||
<select class="form-select" id="self-template">
|
||
<option>GMP固体口服制剂自查表</option>
|
||
<option>GSP药品经营自查表</option>
|
||
<option>数据完整性专项自查表</option>
|
||
<option>质量管理体系年度自查表</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="check-item">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">厂房与设施维护记录完整</div>
|
||
<div class="ci-desc">洁净区空调系统验证报告在有效期内</div>
|
||
</div>
|
||
<div class="ci-priority">已完成</div>
|
||
</div>
|
||
<div class="check-item ent-self-item" data-done="1">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">水系统日常监测与趋势分析</div>
|
||
<div class="ci-desc">电导率、微生物指标每月监测，趋势正常</div>
|
||
</div>
|
||
<div class="ci-priority">已完成</div>
|
||
</div>
|
||
<div class="check-item ent-self-item" data-done="1">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">人员培训档案建立</div>
|
||
<div class="ci-desc">全员GMP培训完成率100%，档案可追溯</div>
|
||
</div>
|
||
<div class="ci-priority">已完成</div>
|
||
</div>
|
||
<div class="check-item ent-self-item" data-done="1">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">供应商资质审计</div>
|
||
<div class="ci-desc">主要原料供应商已完成年度现场审计</div>
|
||
</div>
|
||
<div class="ci-priority">已完成</div>
|
||
</div>
|
||
<div class="check-item ent-self-item" data-done="1">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">设备清洁验证</div>
|
||
<div class="ci-desc">清洁SOP已验证，残留限度符合标准</div>
|
||
</div>
|
||
<div class="ci-priority">已完成</div>
|
||
</div>
|
||
<div class="check-item ent-self-item" data-done="1">
|
||
<div class="ci-checkbox checked">✓</div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">批生产记录审核签字</div>
|
||
<div class="ci-desc">近6个月批记录审核及时率达标</div>
|
||
</div>
|
||
<div class="ci-priority">已完成</div>
|
||
</div>
|
||
<div class="check-item ent-self-item" data-done="0">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">偏差处理程序建立与执行</div>
|
||
<div class="ci-desc">偏差SOP尚未修订，存在程序不完善问题</div>
|
||
</div>
|
||
<div class="ci-priority high">高优先</div>
|
||
</div>
|
||
<div class="check-item ent-self-item" data-done="0">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">变更控制系统运行</div>
|
||
<div class="ci-desc">变更台账需更新，部分变更未闭环</div>
|
||
</div>
|
||
<div class="ci-priority mid">中优先</div>
|
||
</div>
|
||
<div class="check-item ent-self-item" data-done="0">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">电子数据审计追踪</div>
|
||
<div class="ci-desc">HPLC审计追踪功能未全面启用</div>
|
||
</div>
|
||
<div class="ci-priority high">高优先</div>
|
||
</div>
|
||
<div class="check-item ent-self-item" data-done="0">
|
||
<div class="ci-checkbox"></div>
|
||
<div class="ci-content">
|
||
<div class="ci-title">年度产品质量回顾</div>
|
||
<div class="ci-desc">2024年度PQR报告待编制</div>
|
||
</div>
|
||
<div class="ci-priority low">低优先</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">📊</span>自查进度</h3>
|
||
<div style="text-align:center;margin:16px 0;">
|
||
<div style="font-size:36px;font-weight:700;color:#14b8a6;"><span id="entSelfDone">6</span> / 10</div>
|
||
<div style="color:#6b7280;font-size:13px;">已完成自查项</div>
|
||
</div>
|
||
<div class="progress" style="height:14px;">
|
||
<div class="progress-bar green" id="entSelfProgress" style="width:60%;"></div>
|
||
</div>
|
||
<div style="text-align:center;margin-top:8px;font-size:12px;color:#6b7280;">完成率 60%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">⚠</span>待办提醒</h3>
|
||
<div style="font-size:13px;line-height:1.9;">
|
||
<div style="margin-bottom:8px;"><span class="badge-red">高</span> 偏差处理程序需修订</div>
|
||
<div style="margin-bottom:8px;"><span class="badge-red">高</span> HPLC审计追踪启用</div>
|
||
<div style="margin-bottom:8px;"><span class="badge-orange">中</span> 变更台账闭环</div>
|
||
<div><span class="badge-gray">低</span> 2024年度PQR编制</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-teal" id="btn-self-report" style="width:100%;margin-top:16px;">生成自查报告</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIEW: Ent-Document -->
|
||
<div class="view" id="view-ent-document">
|
||
<div class="page-header">
|
||
<h1 class="page-title">文书辅助</h1>
|
||
<p class="page-desc">SOP·偏差报告·CAPA·质量体系文件 <span class="ai-label">AI辅助</span></p>
|
||
</div>
|
||
|
||
<div class="grid-1-2">
|
||
<!-- 左侧：文书类型与配置 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">📝</span>文书类型选择</h3>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;">
|
||
<div class="stat-card ent-doc-type" style="cursor:pointer;text-align:center;" data-type="SOP">
|
||
<div style="font-size:22px;">📋</div>
|
||
<div style="font-size:12px;font-weight:600;margin-top:4px;">SOP</div>
|
||
</div>
|
||
<div class="stat-card ent-doc-type" style="cursor:pointer;text-align:center;border:2px solid #14b8a6;background:#f0fdfa;" data-type="偏差报告">
|
||
<div style="font-size:22px;">⚠</div>
|
||
<div style="font-size:12px;font-weight:600;margin-top:4px;color:#14b8a6;">偏差报告</div>
|
||
</div>
|
||
<div class="stat-card ent-doc-type" style="cursor:pointer;text-align:center;" data-type="CAPA">
|
||
<div style="font-size:22px;">🔧</div>
|
||
<div style="font-size:12px;font-weight:600;margin-top:4px;">CAPA</div>
|
||
</div>
|
||
<div class="stat-card ent-doc-type" style="cursor:pointer;text-align:center;" data-type="变更控制">
|
||
<div style="font-size:22px;">🔄</div>
|
||
<div style="font-size:12px;font-weight:600;margin-top:4px;">变更控制</div>
|
||
</div>
|
||
<div class="stat-card ent-doc-type" style="cursor:pointer;text-align:center;" data-type="风险评估">
|
||
<div style="font-size:22px;">🎯</div>
|
||
<div style="font-size:12px;font-weight:600;margin-top:4px;">风险评估</div>
|
||
</div>
|
||
<div class="stat-card ent-doc-type" style="cursor:pointer;text-align:center;" data-type="质量回顾">
|
||
<div style="font-size:22px;">📈</div>
|
||
<div style="font-size:12px;font-weight:600;margin-top:4px;">质量回顾</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">偏差编号</label>
|
||
<input type="text" class="form-input" id="deviation-no" value="DEV-2026-0042">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">偏差描述</label>
|
||
<textarea class="form-textarea" id="deviation-desc" rows="4" placeholder="请描述偏差发生情况...">2026年6月18日，固体制剂车间包衣工序中，包衣机设定温度为45℃，实际记录显示温度在42-48℃间波动超出允许偏差范围（±2℃），持续约35分钟，涉及批次BG20260618。</textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">发生日期</label>
|
||
<input type="date" class="form-input" id="deviation-date" value="2026-06-18">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">发现日期</label>
|
||
<input type="date" class="form-input" id="discovery-date" value="2025-06-18">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">涉及产品</label>
|
||
<input type="text" class="form-input" id="deviation-product" value="阿莫西林胶囊 0.25g（批号BG20250618）">
|
||
</div>
|
||
|
||
<button class="btn btn-primary" id="btn-gen-deviation" style="width:100%;">AI辅助生成</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：文书预览 -->
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">📄</span>文书预览</h3>
|
||
|
||
<div id="deviation-preview" style="padding:40px 20px;text-align:center;color:#9ca3af;">
|
||
<div style="font-size:48px;margin-bottom:12px;">📝</div>
|
||
<p>请在左侧填写偏差信息，点击"AI辅助生成"创建偏差报告</p>
|
||
</div>
|
||
|
||
<div id="entDocLoading" style="display:none;text-align:center;padding:60px 20px;">
|
||
<div class="ai-label" style="font-size:16px;">AI 生成中...</div>
|
||
<div style="font-size:13px;color:#888;margin-top:8px;">正在分析偏差信息并生成报告</div>
|
||
</div>
|
||
|
||
<div id="deviation-result" style="display:none;">
|
||
<div style="text-align:center;border-bottom:2px solid #e5e7eb;padding-bottom:14px;margin-bottom:16px;">
|
||
<h2 style="margin:0 0 6px;font-size:18px;">偏差调查报告</h2>
|
||
<p style="margin:0;color:#6b7280;font-size:13px;">偏差编号：DEV-2026-0042 | 涉及产品：阿莫西林胶囊 0.25g</p>
|
||
</div>
|
||
|
||
<div style="line-height:1.9;font-size:14px;">
|
||
<p><b>1. 偏差描述</b><br>
|
||
2026年6月18日，固体制剂车间包衣工序中，包衣机设定温度为45℃，实际记录显示温度在42-48℃间波动，超出允许偏差范围（±2℃），持续约35分钟。涉及批次BG20250618，偏差等级评定为<span class="badge-orange">主要偏差</span>。该偏差由操作人员在巡检时发现并即时记录上报。</p>
|
||
|
||
<p><b>2. 根本原因分析</b><br>
|
||
经调查，包衣机温度传感器探头表面存在包衣液结垢，导致温度反馈信号失真，PID控制系统持续调整加热功率造成温度波动。此外，设备预防性维护计划中未纳入传感器探头的定期清洁频次要求，属维护程序缺陷。</p>
|
||
|
||
<p><b>3. 风险评估</b><br>
|
||
依据ICH Q9风险评估工具，采用FMEA方法分析：严重度S=3（可能影响包衣外观及溶出度），发生度O=4（偶发），可探测度D=2（较易发现），RPN=24。该偏差对产品CQA（关键质量属性）的潜在影响为包衣均匀性偏差，需对本批次产品进行溶出度及含量均匀度附加检测。</p>
|
||
|
||
<p><b>4. 纠正措施</b><br>
|
||
① 立即停机清洁温度传感器探头，恢复后重新校准确认；② 对本批次产品进行溶出度、含量均匀度、外观全检，检测结果均符合内控标准，准予放行；③ 将传感器清洁纳入设备日维护清单。</p>
|
||
|
||
<p><b>5. 预防措施</b><br>
|
||
① 修订包衣机预防性维护SOP，增加传感器探头每周清洁及每月校准要求；② 在包衣机温度控制系统中增加温度超限声光报警功能（阈值±1.5℃）；③ 组织包衣工序操作人员开展设备维护及偏差识别专项培训。</p>
|
||
|
||
<p><b>6. 质量影响评估</b><br>
|
||
本次偏差涉及单一批次，经检测产品质量未受实质性影响。已对近3个月同设备生产批次进行回顾性评估，未发现类似温度波动趋势。偏差已闭环，CAPA跟踪期限6个月，由QA部门负责跟踪验证。</p>
|
||
</div>
|
||
|
||
<div style="margin-top:16px;background:#f0fdfa;border-left:3px solid #14b8a6;padding:12px 14px;border-radius:4px;">
|
||
<b style="font-size:13px;">📋 框架引用</b>
|
||
<p style="margin:6px 0 0;font-size:13px;line-height:1.7;">
|
||
本报告依据 <b>ICH Q7（原料药GMP）</b> 第11章偏差处理要求及 <b>ICH Q9（质量风险管理）</b> 风险评估方法编制，符合《药品生产质量管理规范》第250-252条偏差管理相关规定。
|
||
</p>
|
||
</div>
|
||
|
||
<div style="margin-top:16px;display:flex;gap:10px;">
|
||
<button class="btn btn-ghost" style="flex:1;" onclick="showToast('偏差报告已导出','success')">导出文档</button>
|
||
<button class="btn btn-teal" style="flex:1;" onclick="showToast('已提交QA审核流程','info')">提交审核</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIEW: Ent-Training -->
|
||
<div class="view" id="view-ent-training">
|
||
<div class="page-header">
|
||
<h1 class="page-title">实战支撑</h1>
|
||
<p class="page-desc">飞检模拟·培训助手·知识追踪 <span class="ai-label">AI辅助</span></p>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<div class="tab active" data-tab="fly-sim">飞检模拟</div>
|
||
<div class="tab" data-tab="training">培训助手</div>
|
||
</div>
|
||
|
||
<!-- Tab1: 飞检模拟 -->
|
||
<div data-tab-content="fly-sim">
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;">
|
||
<div class="stat-card fade-in fly-scene" style="cursor:pointer;border:2px solid #3b82f6;background:#eff6ff;text-align:center;" data-scene="gmp">
|
||
<div style="font-size:26px;">🚁</div>
|
||
<div style="font-weight:600;font-size:14px;margin-top:6px;color:#3b82f6;">GMP飞行检查</div>
|
||
<div style="font-size:11px;color:#6b7280;margin-top:2px;">已选中</div>
|
||
</div>
|
||
<div class="stat-card fade-in fly-scene" style="cursor:pointer;text-align:center;" data-scene="gsp">
|
||
<div style="font-size:26px;">📦</div>
|
||
<div style="font-weight:600;font-size:14px;margin-top:6px;">GSP飞行检查</div>
|
||
<div style="font-size:11px;color:#9ca3af;margin-top:2px;">点击选择</div>
|
||
</div>
|
||
<div class="stat-card fade-in fly-scene" style="cursor:pointer;text-align:center;" data-scene="di">
|
||
<div style="font-size:26px;">💾</div>
|
||
<div style="font-weight:600;font-size:14px;margin-top:6px;">数据完整性专项</div>
|
||
<div style="font-size:11px;color:#9ca3af;margin-top:2px;">点击选择</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<div class="chat-container">
|
||
<div class="chat-messages" id="flySimMessages">
|
||
<div class="chat-msg ai">
|
||
<div class="msg-avatar">AI</div>
|
||
<div class="msg-bubble">
|
||
<b>【GMP飞行检查模拟 — 检查员提问】</b><br><br>
|
||
您好，我是本次飞行检查的GMP检查员。现在我已到达贵企业固体制剂车间，请回答以下问题：<br><br>
|
||
请说明贵企业<b>偏差处理程序</b>的完整流程，包括偏差的识别、分级、调查、纠正与预防措施（CAPA）及关闭各环节的具体要求和时限。同时请提供偏差台账供我查阅。<br><br>
|
||
<span style="font-size:12px;color:#9ca3af;">提示：请结合企业实际SOP回答，回答将作为评分依据。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding:10px 0;border-top:1px solid var(--border,#e5e7eb);">
|
||
<div class="chat-input">
|
||
<input type="text" id="flySimInput" placeholder="请以企业质量负责人身份回答检查员提问...">
|
||
<button class="btn btn-primary" id="flySimSend">回答</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">📊</span>实时评分面板</h3>
|
||
<div style="font-size:13px;">
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||
<span>法规理解</span><span style="font-weight:600;" id="sc1">35</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar orange" style="width:35%" id="pb1"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||
<span>流程规范</span><span style="font-weight:600;" id="sc2">40</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar orange" style="width:40%"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||
<span>数据完整性</span><span style="font-weight:600;" id="sc3">20</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar red" style="width:20%" id="pb3"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||
<span>人员管理</span><span style="font-weight:600;" id="sc4">30</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar orange" style="width:30%" id="pb6"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||
<span>设施设备</span><span style="font-weight:600;" id="sc5">25</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar red" style="width:25%" id="pb5"></div></div>
|
||
</div>
|
||
<div style="margin-bottom:14px;">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||
<span>质量保证</span><span style="font-weight:600;" id="sc6">30</span>
|
||
</div>
|
||
<div class="progress"><div class="progress-bar orange" style="width:30%"></div></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:16px;padding:12px;background:#fffbeb;border-radius:6px;text-align:center;">
|
||
<div style="font-size:12px;color:#92400e;">综合得分</div>
|
||
<div style="font-size:28px;font-weight:700;color:#f59e0b;" id="totalScore">30</div>
|
||
<div style="font-size:12px;color:#92400e;">模拟进行中 · 待完善</div>
|
||
</div>
|
||
<button class="btn btn-primary" id="btn-end-sim" style="width:100%;margin-top:14px;">结束模拟并生成报告</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab2: 培训助手 -->
|
||
<div data-tab-content="training" style="display:none;">
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;">
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
|
||
<span style="font-size:22px;">📘</span>
|
||
<span class="badge-blue">进行中</span>
|
||
</div>
|
||
<div style="font-weight:600;font-size:15px;">GMP基础</div>
|
||
<div style="font-size:12px;color:#6b7280;margin:4px 0 10px;">共12课时，已完成8课时</div>
|
||
<div class="progress"><div class="progress-bar blue" style="width:65%"></div></div>
|
||
<div style="text-align:right;font-size:12px;color:#6b7280;margin-top:4px;">65%</div>
|
||
</div>
|
||
</div>
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
|
||
<span style="font-size:22px;">💾</span>
|
||
<span class="badge-orange">进行中</span>
|
||
</div>
|
||
<div style="font-weight:600;font-size:15px;">数据完整性</div>
|
||
<div style="font-size:12px;color:#6b7280;margin:4px 0 10px;">共8课时，已完成3课时</div>
|
||
<div class="progress"><div class="progress-bar orange" style="width:40%"></div></div>
|
||
<div style="text-align:right;font-size:12px;color:#6b7280;margin-top:4px;">40%</div>
|
||
</div>
|
||
</div>
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
|
||
<span style="font-size:22px;">⚠</span>
|
||
<span class="badge-red">待加强</span>
|
||
</div>
|
||
<div style="font-weight:600;font-size:15px;">偏差处理</div>
|
||
<div style="font-size:12px;color:#6b7280;margin:4px 0 10px;">共6课时，已完成1课时</div>
|
||
<div class="progress"><div class="progress-bar red" style="width:20%"></div></div>
|
||
<div style="text-align:right;font-size:12px;color:#6b7280;margin-top:4px;">20%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">📈</span>知识点掌握度</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left;padding:8px 6px;">知识点</th>
|
||
<th style="width:220px;">掌握度</th>
|
||
<th style="text-align:right;width:80px;">等级</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:10px 6px;">GMP基本原理</td>
|
||
<td><div class="progress"><div class="progress-bar green" style="width:88%"></div></div></td>
|
||
<td style="text-align:right;"><span class="badge-green">精通</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">洁净区管理</td>
|
||
<td><div class="progress"><div class="progress-bar green" style="width:82%"></div></div></td>
|
||
<td style="text-align:right;"><span class="badge-green">熟练</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">批记录管理</td>
|
||
<td><div class="progress"><div class="progress-bar blue" style="width:75%"></div></div></td>
|
||
<td style="text-align:right;"><span class="badge-blue">良好</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">数据完整性ALCOA+</td>
|
||
<td><div class="progress"><div class="progress-bar orange" style="width:55%"></div></div></td>
|
||
<td style="text-align:right;"><span class="badge-orange">一般</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">偏差处理流程</td>
|
||
<td><div class="progress"><div class="progress-bar orange" style="width:48%"></div></div></td>
|
||
<td style="text-align:right;"><span class="badge-orange">一般</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">变更控制</td>
|
||
<td><div class="progress"><div class="progress-bar red" style="width:35%"></div></div></td>
|
||
<td style="text-align:right;"><span class="badge-red">薄弱</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">CAPA管理</td>
|
||
<td><div class="progress"><div class="progress-bar red" style="width:30%"></div></div></td>
|
||
<td style="text-align:right;"><span class="badge-red">薄弱</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 6px;">质量风险管理</td>
|
||
<td><div class="progress"><div class="progress-bar orange" style="width:52%"></div></div></td>
|
||
<td style="text-align:right;"><span class="badge-orange">一般</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-in">
|
||
<div class="card-body">
|
||
<h3 class="card-title"><span class="ct-icon">🧭</span>AI推荐学习路径</h3>
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">第1步</div>
|
||
<div class="timeline-content">
|
||
<b>巩固基础 — 偏差处理流程</b><br>
|
||
<span style="font-size:13px;color:#6b7280;">学习《偏差处理SOP编制与执行》课程（2课时），重点掌握偏差分级标准与调查方法</span>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">第2步</div>
|
||
<div class="timeline-content">
|
||
<b>进阶提升 — CAPA管理</b><br>
|
||
<span style="font-size:13px;color:#6b7280;">学习《纠正与预防措施（CAPA）系统》课程（3课时），结合ICH Q10框架理解</span>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">第3步</div>
|
||
<div class="timeline-content">
|
||
<b>专项突破 — 数据完整性</b><br>
|
||
<span style="font-size:13px;color:#6b7280;">完成数据完整性课程剩余5课时，重点学习ALCOA+原则及审计追踪</span>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-time">第4步</div>
|
||
<div class="timeline-content">
|
||
<b>综合应用 — 变更控制</b><br>
|
||
<span style="font-size:13px;color:#6b7280;">学习《变更控制系统》课程（3课时），并通过飞检模拟验证综合能力</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-teal" style="width:100%;margin-top:16px;">开始学习</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hidden elements for JS compatibility -->
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
// ===== Global Cross-View Navigation Functions =====
|
||
|
||
// 派单检查：从风险预警/企业画像跳转到飞行检查
|
||
function dispatchInspection(companyName) {
|
||
// 切换到监管端
|
||
document.getElementById('sidebar-regulator').style.display = 'flex';
|
||
document.getElementById('sidebar-enterprise').style.display = 'none';
|
||
document.querySelectorAll('.topbar-nav-item').forEach(function(el) {
|
||
el.classList.toggle('active', el.textContent.indexOf('药监AI监管助手') >= 0);
|
||
});
|
||
showView('inspection');
|
||
// 预填企业名称
|
||
var sel = document.getElementById('insp-company');
|
||
if (sel) {
|
||
for (var i = 0; i < sel.options.length; i++) {
|
||
if (sel.options[i].text === companyName) {
|
||
sel.selectedIndex = i;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
showToast('已派单至飞行检查 · 企业：' + companyName, 'success');
|
||
}
|
||
|
||
// 跳转到文书生成
|
||
function navigateToDoc(docType) {
|
||
showView('document');
|
||
var sel = document.getElementById('doc-type');
|
||
if (sel && docType) {
|
||
var typeMap = {
|
||
'inspection': 'inspection',
|
||
'penalty': 'penalty',
|
||
'rectify': 'rectify',
|
||
'transfer': 'transfer'
|
||
};
|
||
var val = typeMap[docType] || docType;
|
||
for (var i = 0; i < sel.options.length; i++) {
|
||
if (sel.options[i].value === val) {
|
||
sel.selectedIndex = i;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
showToast('已跳转至文书生成' + (docType === 'penalty' ? '（行政处罚决定书）' : '（现场检查报告）'), 'info');
|
||
// 滚动到文书配置区域
|
||
setTimeout(function() {
|
||
var cfg = document.querySelector('#view-document .card');
|
||
if (cfg) cfg.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}, 100);
|
||
}
|
||
|
||
// 企业画像搜索
|
||
function searchProfile() {
|
||
var input = document.getElementById('profile-search');
|
||
var v = input ? input.value.trim() : '';
|
||
if (!v) { showToast('请输入企业名称或许可证号', 'warning'); return; }
|
||
showToast('已加载企业：' + v + ' 的全景画像', 'success');
|
||
}
|
||
|
||
// 法规智能问答发送（全局函数，供 onclick 调用）
|
||
function sendLegalQA() {
|
||
var input = document.getElementById('legalqaInput');
|
||
if (!input) return;
|
||
var q = input.value.trim();
|
||
if (!q) { showToast('请输入问题', 'warning'); return; }
|
||
// 触发自定义事件让 IIFE 内的监听器处理
|
||
var btn = document.getElementById('legalqaSend');
|
||
if (btn) btn.click();
|
||
}
|
||
</script>
|
||
|
||
|
||
<script>
|
||
// ===== Navigation =====
|
||
function switchApp(app) {
|
||
document.querySelectorAll('.topbar-nav-item').forEach(el => el.classList.remove('active'));
|
||
event.currentTarget.classList.add('active');
|
||
|
||
document.getElementById('sidebar-regulator').style.display = app === 'regulator' ? 'flex' : 'none';
|
||
document.getElementById('sidebar-enterprise').style.display = app === 'enterprise' ? 'flex' : 'none';
|
||
|
||
if (app === 'regulator') {
|
||
showView('dashboard');
|
||
document.querySelector('#sidebar-regulator .sidebar-item').classList.add('active');
|
||
} else {
|
||
showView('ent-home');
|
||
document.querySelector('#sidebar-enterprise .sidebar-item').classList.add('active');
|
||
}
|
||
}
|
||
|
||
function showView(viewId) {
|
||
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
||
document.getElementById('view-' + viewId).classList.add('active');
|
||
|
||
// Update sidebar active state
|
||
document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));
|
||
const clicked = event && event.currentTarget;
|
||
if (clicked && clicked.classList.contains('sidebar-item')) {
|
||
clicked.classList.add('active');
|
||
}
|
||
|
||
// Scroll to top
|
||
document.querySelector('.main').scrollTop = 0;
|
||
}
|
||
|
||
// ===== Toast =====
|
||
function showToast(msg, type) {
|
||
var t = document.getElementById('toast');
|
||
t.textContent = msg;
|
||
t.className = 'toast show' + (type ? ' ' + type : '');
|
||
setTimeout(function() { t.classList.remove('show'); }, 3000);
|
||
}
|
||
|
||
// ===== Chat Simulation =====
|
||
function simulateAIResponse(viewId, messages, callback) {
|
||
var container = document.querySelector('#view-' + viewId + ' .chat-messages');
|
||
if (!container) return;
|
||
|
||
// Add typing indicator
|
||
var typingEl = document.createElement('div');
|
||
typingEl.className = 'chat-msg ai fade-in';
|
||
typingEl.innerHTML = '<div class="msg-avatar">AI</div><div class="msg-bubble"><div class="typing-dots"><span></span><span></span><span></span></div></div>';
|
||
container.appendChild(typingEl);
|
||
container.scrollTop = container.scrollHeight;
|
||
|
||
setTimeout(function() {
|
||
typingEl.remove();
|
||
messages.forEach(function(msg, i) {
|
||
setTimeout(function() {
|
||
var msgEl = document.createElement('div');
|
||
msgEl.className = 'chat-msg ai fade-in';
|
||
var html = '<div class="msg-avatar">AI</div><div class="msg-bubble">' + msg.text;
|
||
if (msg.source) {
|
||
html += '<div class="msg-source"><strong>📍 法规溯源：</strong>' + msg.source + '</div>';
|
||
}
|
||
html += '</div>';
|
||
msgEl.innerHTML = html;
|
||
container.appendChild(msgEl);
|
||
container.scrollTop = container.scrollHeight;
|
||
}, i * 600);
|
||
});
|
||
if (callback) callback();
|
||
}, 1200);
|
||
}
|
||
|
||
// ===== Check Item Toggle =====
|
||
document.addEventListener('click', function(e) {
|
||
if (e.target.classList.contains('ci-checkbox')) {
|
||
e.target.classList.toggle('checked');
|
||
if (e.target.classList.contains('checked')) {
|
||
e.target.innerHTML = '✓';
|
||
} else {
|
||
e.target.innerHTML = '';
|
||
}
|
||
}
|
||
});
|
||
|
||
// ===== Tab Switching =====
|
||
document.addEventListener('click', function(e) {
|
||
if (e.target.classList.contains('tab')) {
|
||
var tabGroup = e.target.parentElement;
|
||
tabGroup.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||
e.target.classList.add('active');
|
||
var target = e.target.getAttribute('data-tab');
|
||
if (target) {
|
||
document.querySelectorAll('[data-tab-content]').forEach(c => c.style.display = 'none');
|
||
var content = document.querySelector('[data-tab-content="' + target + '"]');
|
||
if (content) content.style.display = 'block';
|
||
}
|
||
}
|
||
});
|
||
|
||
(function () {
|
||
'use strict';
|
||
|
||
/* ----------------------------------------------------------
|
||
* 1. 飞行检查 - 生成检查方案
|
||
* -------------------------------------------------------- */
|
||
document.addEventListener('click', function (e) {
|
||
// 生成检查方案按钮
|
||
var genBtn = e.target.closest('#btn-generate-plan');
|
||
if (genBtn) {
|
||
var company = document.getElementById('insp-company');
|
||
if (!company || !company.value) {
|
||
showToast('请先选择企业', 'warning');
|
||
return;
|
||
}
|
||
|
||
var originalText = genBtn.textContent;
|
||
genBtn.disabled = true;
|
||
genBtn.textContent = 'AI生成中...';
|
||
|
||
var emptyState = document.getElementById('plan-empty-state');
|
||
var result = document.getElementById('plan-result');
|
||
|
||
// 显示loading态
|
||
if (emptyState) {
|
||
emptyState.innerHTML = '<div style="font-size:48px;margin-bottom:16px;">⏳</div><p style="font-size:15px;">AI正在生成检查方案...</p><p style="font-size:13px;margin-top:8px;color:var(--text-secondary);">正在分析企业画像、历史记录与法规知识库</p>';
|
||
}
|
||
|
||
setTimeout(function () {
|
||
if (emptyState) emptyState.style.display = 'none';
|
||
if (result) {
|
||
result.style.display = 'block';
|
||
result.classList.add('fade-in');
|
||
}
|
||
genBtn.disabled = false;
|
||
genBtn.textContent = originalText;
|
||
showToast('检查方案已生成', 'success');
|
||
}, 1500);
|
||
}
|
||
|
||
/* ----------------------------------------------------------
|
||
* 2. 飞行检查 - 现场研判（打开模态框）
|
||
* -------------------------------------------------------- */
|
||
var fieldBtn = e.target.closest('#btn-field-analysis');
|
||
if (fieldBtn) {
|
||
var modal = document.getElementById('modal-field-analysis');
|
||
if (modal) {
|
||
modal.style.display = 'flex';
|
||
}
|
||
}
|
||
|
||
// 关闭模态框
|
||
var closeBtn = e.target.closest('#btn-close-modal');
|
||
if (closeBtn) {
|
||
var modalToClose = document.getElementById('modal-field-analysis');
|
||
if (modalToClose) modalToClose.style.display = 'none';
|
||
}
|
||
|
||
// 点击overlay空白处关闭
|
||
if (e.target.classList && e.target.classList.contains('modal-overlay')) {
|
||
e.target.style.display = 'none';
|
||
}
|
||
|
||
/* ----------------------------------------------------------
|
||
* 3. 飞行检查 - 现场研判 AI分析
|
||
* -------------------------------------------------------- */
|
||
var analyzeBtn = e.target.closest('#btn-analyze-issue');
|
||
if (analyzeBtn) {
|
||
var issueInput = document.getElementById('field-issue');
|
||
var issueText = issueInput ? issueInput.value.trim() : '';
|
||
if (!issueText) {
|
||
showToast('请输入现场问题描述', 'warning');
|
||
return;
|
||
}
|
||
|
||
var analyzeOriginal = analyzeBtn.textContent;
|
||
analyzeBtn.disabled = true;
|
||
analyzeBtn.textContent = 'AI分析中...';
|
||
|
||
setTimeout(function () {
|
||
var resultBox = document.getElementById('field-analysis-result');
|
||
if (resultBox) {
|
||
resultBox.style.display = 'block';
|
||
resultBox.classList.add('fade-in');
|
||
}
|
||
analyzeBtn.disabled = false;
|
||
analyzeBtn.textContent = analyzeOriginal;
|
||
showToast('AI研判分析完成', 'success');
|
||
}, 1500);
|
||
}
|
||
|
||
/* ----------------------------------------------------------
|
||
* 4. 稽查办案 - AI预审
|
||
* -------------------------------------------------------- */
|
||
var preReviewBtn = e.target.closest('#btn-pre-review');
|
||
if (preReviewBtn) {
|
||
var caseIllegal = document.getElementById('case-illegal');
|
||
if (!caseIllegal || !caseIllegal.value.trim()) {
|
||
showToast('请输入涉嫌违法行为', 'warning');
|
||
return;
|
||
}
|
||
|
||
var preOriginal = preReviewBtn.textContent;
|
||
preReviewBtn.disabled = true;
|
||
preReviewBtn.textContent = 'AI预审中...';
|
||
|
||
var preEmpty = document.getElementById('pre-review-empty');
|
||
var preResult = document.getElementById('pre-review-result');
|
||
|
||
setTimeout(function () {
|
||
if (preEmpty) preEmpty.style.display = 'none';
|
||
if (preResult) {
|
||
preResult.style.display = 'block';
|
||
preResult.classList.add('fade-in');
|
||
}
|
||
preReviewBtn.disabled = false;
|
||
preReviewBtn.textContent = preOriginal;
|
||
showToast('AI预审分析完成', 'success');
|
||
var docBtn = document.getElementById('btn-gen-penalty');
|
||
if (docBtn) docBtn.style.display = '';
|
||
}, 1500);
|
||
}
|
||
|
||
/* ----------------------------------------------------------
|
||
* 5. 稽查办案 - 计算裁量
|
||
* -------------------------------------------------------- */
|
||
var calcBtn = e.target.closest('#btn-calc-discretion');
|
||
if (calcBtn) {
|
||
var incomeInput = document.getElementById('discretion-income');
|
||
if (!incomeInput || !incomeInput.value.trim()) {
|
||
showToast('请输入违法所得金额', 'warning');
|
||
return;
|
||
}
|
||
|
||
var calcOriginal = calcBtn.textContent;
|
||
calcBtn.disabled = true;
|
||
calcBtn.textContent = '计算中...';
|
||
|
||
var disEmpty = document.getElementById('discretion-empty');
|
||
var disResult = document.getElementById('discretion-result');
|
||
|
||
setTimeout(function () {
|
||
if (disEmpty) disEmpty.style.display = 'none';
|
||
if (disResult) {
|
||
disResult.style.display = 'block';
|
||
disResult.classList.add('fade-in');
|
||
}
|
||
calcBtn.disabled = false;
|
||
calcBtn.textContent = calcOriginal;
|
||
showToast('裁量计算完成', 'success');
|
||
}, 1200);
|
||
}
|
||
});
|
||
|
||
/* ----------------------------------------------------------
|
||
* 6. 检查重点标签点击切换选中态
|
||
* -------------------------------------------------------- */
|
||
document.addEventListener('click', function (e) {
|
||
var focusTag = e.target.closest('.insp-focus');
|
||
if (focusTag) {
|
||
if (focusTag.style.opacity === '0.5') {
|
||
focusTag.style.opacity = '1';
|
||
} else {
|
||
focusTag.style.opacity = '0.5';
|
||
}
|
||
}
|
||
});
|
||
|
||
})();
|
||
</script>
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
|
||
/* ---------- 工具：构建聊天消息 DOM ---------- */
|
||
function buildMsg(role, html, sourceHtml) {
|
||
var wrap = document.createElement('div');
|
||
wrap.className = 'chat-msg ' + role;
|
||
var avatar = document.createElement('div');
|
||
avatar.className = 'msg-avatar';
|
||
avatar.textContent = role === 'ai' ? 'AI' : '我';
|
||
var bubble = document.createElement('div');
|
||
bubble.className = 'msg-bubble';
|
||
bubble.innerHTML = html;
|
||
if (sourceHtml) {
|
||
var src = document.createElement('div');
|
||
src.className = 'msg-source';
|
||
src.innerHTML = sourceHtml;
|
||
bubble.appendChild(src);
|
||
}
|
||
if (role === 'user') {
|
||
wrap.appendChild(bubble);
|
||
wrap.appendChild(avatar);
|
||
} else {
|
||
wrap.appendChild(avatar);
|
||
wrap.appendChild(bubble);
|
||
}
|
||
return wrap;
|
||
}
|
||
|
||
function appendMsg(box, role, html, sourceHtml) {
|
||
var node = buildMsg(role, html, sourceHtml);
|
||
box.appendChild(node);
|
||
box.scrollTop = box.scrollHeight;
|
||
return node;
|
||
}
|
||
|
||
function buildLoadingMsg(box) {
|
||
var node = buildMsg('ai', '<span style="opacity:.7;">AI 思考中<span class="dots">...</span></span>');
|
||
box.appendChild(node);
|
||
box.scrollTop = box.scrollHeight;
|
||
return node;
|
||
}
|
||
|
||
/* ---------- 视图1：法规智能问答 ---------- */
|
||
function initLegalQA() {
|
||
var box = document.getElementById('legalqaMessages');
|
||
var input = document.getElementById('legalqaInput');
|
||
var sendBtn = document.getElementById('legalqaSend');
|
||
|
||
var replies = {
|
||
'药品经营许可证换证需要什么材料？': {
|
||
text: '药品经营许可证换证需提交以下材料：<br><br>1. <b>换证申请表</b>（加盖企业公章）；<br>2. <b>原药品经营许可证</b>正副本原件及复印件；<br>3. <b>营业执照</b>复印件；<br>4. <b>企业质量管理文件</b>及GSP实施情况说明；<br>5. <b>从业人员资格证明</b>（执业药师注册证等）；<br>6. <b>仓储设施设备</b>情况说明；<br>7. 法定代表人、企业负责人身份证明。<br><br>建议在许可证有效期届满前6个月提交申请。',
|
||
source: '<span>📜 溯源条款：</span><a href="javascript:void(0)">《药品经营许可证管理办法》第18条</a> · <a href="javascript:void(0)">《药品流通监督管理办法》</a>'
|
||
},
|
||
'飞行检查中发现数据完整性问题如何定性？': {
|
||
text: '飞行检查中发现数据完整性问题，应依据ALCOA+原则进行定性：<br><br>1. <b>关键缺陷</b>：故意篡改、伪造数据，删除原始记录，批量重录色谱图等，直接判定为严重违反GMP；<br>2. <b>主要缺陷</b>：审计追踪未开启、共享账号登录、电子数据未备份、记录不及时填写等；<br>3. <b>一般缺陷</b>：记录涂改未签字、日期填写不规范等。<br><br>处理流程：检查组应固定证据→企业签字确认→发出缺陷整改通知→必要时采取风险控制措施（如暂停生产、召回产品）。',
|
||
source: '<span>📜 溯源条款：</span><a href="javascript:void(0)">《药品生产质量管理规范》第8章 数据完整性</a> · <a href="javascript:void(0)">《药品数据管理规范》</a> · <a href="javascript:void(0)">MHRA数据完整性指南</a>'
|
||
},
|
||
'行政处罚裁量中\'情节严重\'如何认定？': {
|
||
text: '"情节严重"的认定需综合考量以下因素：<br><br>1. <b>主观方面</b>：明知故犯、屡查屡犯、抗拒检查；<br>2. <b>客观危害</b>：造成人体健康严重危害或死亡、涉及特殊管理药品、涉及疫苗等高风险品种；<br>3. <b>违法规模</b>：货值金额巨大、涉案批次多、流向多个省份；<br>4. <b>补救态度</b>：拒不召回、销毁证据、转移涉案物品。<br><br>符合上述情形之一的，可认定为情节严重，依法从重处罚，直至吊销许可证、移送司法机关追究刑事责任。',
|
||
source: '<span>📜 溯源条款：</span><a href="javascript:void(0)">《药品管理法》第137条</a> · <a href="javascript:void(0)">《行政处罚法》第32条</a> · <a href="javascript:void(0)">《药品行政处罚裁量基准》</a>'
|
||
}
|
||
};
|
||
|
||
function fallbackReply(q) {
|
||
return {
|
||
text: '您的问题"' + q + '"已收到。基于RAG检索，我已匹配相关法规条款。简要答复：该问题涉及《药品管理法》及相关质量管理规范的具体要求，建议结合企业实际情况参照执行。如需详细解读，可进一步说明场景。',
|
||
source: '<span>📜 溯源条款：</span><a href="javascript:void(0)">《药品管理法》</a> · <a href="javascript:void(0)">《药品生产质量管理规范》</a>'
|
||
};
|
||
}
|
||
|
||
function send(q) {
|
||
q = (q || input.value).trim();
|
||
if (!q) { showToast('请输入问题', 'warning'); return; }
|
||
appendMsg(box, 'user', q);
|
||
input.value = '';
|
||
var loading = buildLoadingMsg(box);
|
||
var reply = replies[q] || fallbackReply(q);
|
||
setTimeout(function () {
|
||
loading.querySelector('.msg-bubble').innerHTML = reply.text + (reply.source ? '<div class="msg-source">' + reply.source + '</div>' : '');
|
||
box.scrollTop = box.scrollHeight;
|
||
showToast('AI 回复已生成', 'success');
|
||
}, 1100);
|
||
}
|
||
|
||
sendBtn.addEventListener('click', function () { send(); });
|
||
input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); send(); } });
|
||
document.querySelectorAll('.legalqa-quick').forEach(function (tag) {
|
||
tag.addEventListener('click', function () {
|
||
input.value = tag.getAttribute('data-q');
|
||
input.focus();
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ---------- 视图2：监管文书智能生成 ---------- */
|
||
function initDocument() {
|
||
var genBtn = document.getElementById('btn-gen-doc');
|
||
var empty = document.getElementById('doc-preview');
|
||
var loading = document.getElementById('docLoading');
|
||
var result = document.getElementById('doc-result');
|
||
var titleEl = document.getElementById('docResultTitle');
|
||
var numEl = document.getElementById('docNum');
|
||
|
||
var tplContents = {
|
||
'行政处罚决定书': { num: '辽药监罚〔2026〕第017号', title: '行政处罚决定书' },
|
||
'现场检查报告': { num: '辽药监检〔2026〕第042号', title: '药品GMP现场检查报告' },
|
||
'责令改正通知书': { num: '辽药监改〔2026〕第089号', title: '责令改正通知书' },
|
||
'案件移送函': { num: '辽药监移〔2026〕第005号', title: '案件移送函' }
|
||
};
|
||
|
||
genBtn.addEventListener('click', function () {
|
||
var type = document.getElementById('doc-type').value;
|
||
var info = tplContents[type] || tplContents['行政处罚决定书'];
|
||
empty.style.display = 'none';
|
||
result.style.display = 'none';
|
||
loading.style.display = 'block';
|
||
genBtn.disabled = true;
|
||
genBtn.textContent = '生成中...';
|
||
showToast('AI 正在生成文书...', 'info');
|
||
setTimeout(function () {
|
||
loading.style.display = 'none';
|
||
result.style.display = 'block';
|
||
titleEl.textContent = info.title;
|
||
numEl.textContent = info.num;
|
||
genBtn.disabled = false;
|
||
genBtn.textContent = '生成文书';
|
||
showToast('文书生成完成，已挂载法规条款', 'success');
|
||
}, 1500);
|
||
});
|
||
|
||
// 模板卡片点击切换
|
||
document.querySelectorAll('.doc-tpl-card').forEach(function (card) {
|
||
card.addEventListener('click', function () {
|
||
var tpl = card.getAttribute('data-tpl');
|
||
var sel = document.getElementById('doc-type');
|
||
for (var i = 0; i < sel.options.length; i++) {
|
||
if (sel.options[i].text === tpl) { sel.selectedIndex = i; break; }
|
||
}
|
||
showToast('已选择模板：' + tpl, 'info');
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ---------- 视图3：企业全景画像 ---------- */
|
||
function initProfile() {
|
||
// Profile search is handled by global searchProfile() function
|
||
// No additional init needed since onclick is in HTML
|
||
}
|
||
|
||
/* ---------- 视图5：合规导航（Tab切换 + 法规问答 + 申报审查 + 自查） ---------- */
|
||
function initEntCompliance() {
|
||
// Tab 切换
|
||
var tabWrap = document.querySelector('#view-ent-compliance .tabs');
|
||
if (tabWrap) {
|
||
tabWrap.querySelectorAll('.tab').forEach(function (t) {
|
||
t.addEventListener('click', function () {
|
||
var key = t.getAttribute('data-tab');
|
||
tabWrap.querySelectorAll('.tab').forEach(function (x) {
|
||
x.classList.remove('active');
|
||
x.style.borderBottom = '';
|
||
x.style.fontWeight = '';
|
||
x.style.color = '#666';
|
||
});
|
||
t.classList.add('active');
|
||
t.style.borderBottom = '2px solid #0ea5e9';
|
||
t.style.marginBottom = '-2px';
|
||
t.style.fontWeight = 'bold';
|
||
t.style.color = '';
|
||
document.querySelectorAll('#view-ent-compliance [data-tab-content]').forEach(function (c) {
|
||
c.style.display = c.getAttribute('data-tab-content') === key ? '' : 'none';
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
// 法规问答
|
||
var box = document.getElementById('entQaMessages');
|
||
var input = document.getElementById('entQaInput');
|
||
var sendBtn = document.getElementById('entQaSend');
|
||
var replies = {
|
||
'GMP要求洁净区如何分级？': {
|
||
text: '根据GMP附录，洁净区按空气悬浮粒子限度分为A、B、C、D四级：<br><br><b>A级</b>：高风险操作区（如灌装、无菌配制），采用单向流；<br><b>B级</b>：无菌配制和灌装A级区的背景环境；<br><b>C级/D级</b>：生产无菌药品过程中重要程度较低的洁净区。<br><br>各级别对悬浮粒子（≥0.5μm和≥5μm）、微生物限度有明确静态/动态标准。',
|
||
source: '<span>📜 溯源：</span><a href="javascript:void(0)">GMP附录1 无菌药品 第5-10条</a>'
|
||
},
|
||
'数据完整性ALCOA+原则是什么？': {
|
||
text: 'ALCOA+是数据完整性的核心原则：<br><br><b>A</b>ttributable — 可归因（可追溯至记录者）<br><b>L</b>egible — 易读（清晰可辨）<br><b>C</b>ontemporaneous — 同步（实时记录）<br><b>O</b>riginal — 原始（保留第一手记录）<br><b>A</b>ccurate — 准确（真实无误）<br><br>扩充"+"：<br><b>Complete</b> 完整、<b>Consistent</b> 一致、<b>Enduring</b> 持久、<b>Available</b> 可用。',
|
||
source: '<span>📜 溯源：</span><a href="javascript:void(0)">《药品数据管理规范》第3条</a> · <a href="javascript:void(0)">WHO TRS996</a>'
|
||
},
|
||
'GSP对温湿度监测有什么要求？': {
|
||
text: 'GSP对温湿度监测要求：<br><br>1. <b>自动监测</b>：库房应配备温湿度自动监测系统，每30分钟至少记录一次；<br>2. <b>测点布置</b>：每300平方米不少于1个测点，特殊库房加密布置；<br>3. <b>报警功能</b>：温湿度超出规定范围时系统应自动报警；<br>4. <b>记录保存</b>：监测数据至少保存5年；<br>5. <b>校准</b>：监测设备每年至少校准一次。<br><br>常温库0-30℃，阴凉库≤20℃，冷库2-8℃。',
|
||
source: '<span>📜 溯源：</span><a href="javascript:void(0)">GSP第43-48条</a> · <a href="javascript:void(0)">温湿度自动监测附录</a>'
|
||
}
|
||
};
|
||
function fallback(q) {
|
||
return {
|
||
text: '关于"' + q + '"，根据GMP/GSP相关要求，建议企业建立相应的管理制度并严格执行。如需更详细的解读，请提供具体场景。',
|
||
source: '<span>📜 溯源：</span><a href="javascript:void(0)">GMP/GSP相关条款</a>'
|
||
};
|
||
}
|
||
function send(q) {
|
||
q = (q || input.value).trim();
|
||
if (!q) { showToast('请输入问题', 'warning'); return; }
|
||
appendMsg(box, 'user', q);
|
||
input.value = '';
|
||
var loading = buildLoadingMsg(box);
|
||
var reply = replies[q] || fallback(q);
|
||
setTimeout(function () {
|
||
loading.querySelector('.msg-bubble').innerHTML = reply.text + '<div class="msg-source">' + reply.source + '</div>';
|
||
box.scrollTop = box.scrollHeight;
|
||
}, 1000);
|
||
}
|
||
sendBtn.addEventListener('click', function () { send(); });
|
||
input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); send(); } });
|
||
document.querySelectorAll('.entqa-quick').forEach(function (tag) {
|
||
tag.addEventListener('click', function () { input.value = tag.getAttribute('data-q'); input.focus(); });
|
||
});
|
||
|
||
// 申报审查 - 模拟上传
|
||
var uploadArea = document.getElementById('entUploadArea');
|
||
var uploaded = document.getElementById('entUploadedFiles');
|
||
var fakeFiles = ['注册申报资料-主文档.pdf', '产品质量研究报告.pdf', '生产工艺流程图.xlsx'];
|
||
var idx = 0;
|
||
uploadArea.addEventListener('click', function () {
|
||
if (idx >= fakeFiles.length) { showToast('已上传全部示例文件', 'info'); return; }
|
||
var div = document.createElement('div');
|
||
div.style.cssText = 'display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid #e5e7eb;border-radius:6px;font-size:12px;background:#f8fafc;';
|
||
div.innerHTML = '<span>📎 ' + fakeFiles[idx] + '</span><span class="badge-green">已上传</span>';
|
||
uploaded.appendChild(div);
|
||
idx++;
|
||
showToast('文件已上传', 'success');
|
||
});
|
||
|
||
// 申报审查 - AI审查
|
||
var reviewBtn = document.getElementById('btn-ai-review');
|
||
var reviewResult = document.getElementById('review-result');
|
||
reviewBtn.addEventListener('click', function () {
|
||
reviewResult.innerHTML = '<div style="text-align:center;padding:60px 20px;"><div class="ai-label">AI 审查中...</div><div style="font-size:13px;color:#888;">材料完整性 · 合规性 · 风险点</div></div>';
|
||
setTimeout(function () {
|
||
reviewResult.innerHTML =
|
||
'<div style="border:1px solid #e5e7eb;border-radius:10px;padding:14px;">' +
|
||
'<h4 style="margin:0 0 10px;">✅ 材料完整性检查</h4>' +
|
||
'<div style="color:#16a34a;margin:5px 0;">✓ 药品注册申请表</div>' +
|
||
'<div style="color:#16a34a;margin:5px 0;">✓ 产品质量研究报告</div>' +
|
||
'<div style="color:#16a34a;margin:5px 0;">✓ 生产工艺研究资料</div>' +
|
||
'<div style="color:#16a34a;margin:5px 0;">✓ 稳定性研究资料</div>' +
|
||
'<div style="color:#ea580c;margin:5px 0;">○ 知识产权状况说明（缺失）</div>' +
|
||
'</div>' +
|
||
'<div style="border:1px solid #e5e7eb;border-radius:10px;padding:14px;margin-top:12px;">' +
|
||
'<h4 style="margin:0 0 10px;">📋 合规性分析</h4>' +
|
||
'<table style="width:100%;font-size:12px;"><tbody>' +
|
||
'<tr><td style="padding:5px 0;">工艺验证数据</td><td><span class="badge-green">符合</span></td></tr>' +
|
||
'<tr><td style="padding:5px 0;">质量标准</td><td><span class="badge-green">符合</span></td></tr>' +
|
||
'<tr><td style="padding:5px 0;">稳定性考察周期</td><td><span class="badge-orange">需补充</span></td></tr>' +
|
||
'<tr><td style="padding:5px 0;">原辅料来源</td><td><span class="badge-green">符合</span></td></tr>' +
|
||
'</tbody></table></div>' +
|
||
'<div style="border-left:3px solid #0ea5e9;background:#f0f9ff;padding:10px 12px;border-radius:4px;margin-top:12px;font-size:12px;">' +
|
||
'<b><span class="ai-label">AI辅助</span> 建议：</b>当前申报材料基本完整，建议补充知识产权状况说明，并延长稳定性考察至12个月以支持有效期申报。' +
|
||
'</div>';
|
||
showToast('AI 审查完成', 'success');
|
||
}, 1500);
|
||
});
|
||
|
||
// 合规自查 - 点击切换完成状态
|
||
var doneCount = 6;
|
||
function updateSelfProgress() {
|
||
document.getElementById('entSelfDone').textContent = doneCount;
|
||
document.getElementById('entSelfProgress').style.width = (doneCount / 10 * 100) + '%';
|
||
}
|
||
document.querySelectorAll('.ent-self-item').forEach(function (item) {
|
||
item.addEventListener('click', function () {
|
||
var done = item.getAttribute('data-done') === '1';
|
||
var prio = item.querySelector('.ci-priority');
|
||
var checkbox = item.querySelector('.ci-checkbox');
|
||
if (done) {
|
||
item.setAttribute('data-done', '0');
|
||
item.style.background = '#fffbeb';
|
||
if (checkbox) { checkbox.classList.remove('checked'); checkbox.innerHTML = ''; }
|
||
if (prio) prio.innerHTML = '待自查';
|
||
doneCount--;
|
||
} else {
|
||
item.setAttribute('data-done', '1');
|
||
item.style.background = '';
|
||
if (checkbox) { checkbox.classList.add('checked'); checkbox.innerHTML = '✓'; }
|
||
if (prio) prio.innerHTML = '已完成';
|
||
doneCount++;
|
||
}
|
||
updateSelfProgress();
|
||
});
|
||
});
|
||
|
||
document.getElementById('btn-self-report').addEventListener('click', function () {
|
||
showToast('自查报告生成中... 已完成 ' + doneCount + '/10 项', 'info');
|
||
setTimeout(function () { showToast('自查报告已生成，可下载', 'success'); }, 1200);
|
||
});
|
||
}
|
||
|
||
/* ---------- 视图6：文书辅助 ---------- */
|
||
function initEntDocument() {
|
||
var types = document.querySelectorAll('.ent-doc-type');
|
||
types.forEach(function (t) {
|
||
t.addEventListener('click', function () {
|
||
types.forEach(function (x) {
|
||
x.classList.remove('active');
|
||
x.style.border = '1px solid #e5e7eb';
|
||
x.style.background = '';
|
||
x.style.fontWeight = '';
|
||
});
|
||
t.classList.add('active');
|
||
t.style.border = '2px solid #0ea5e9';
|
||
t.style.background = '#f0f9ff';
|
||
t.style.fontWeight = 'bold';
|
||
showToast('已选择文书类型：' + t.getAttribute('data-type'), 'info');
|
||
});
|
||
});
|
||
|
||
var genBtn = document.getElementById('btn-gen-deviation');
|
||
var empty = document.getElementById('deviation-preview');
|
||
var loading = document.getElementById('entDocLoading');
|
||
var result = document.getElementById('deviation-result');
|
||
genBtn.addEventListener('click', function () {
|
||
empty.style.display = 'none';
|
||
result.style.display = 'none';
|
||
loading.style.display = 'block';
|
||
genBtn.disabled = true;
|
||
genBtn.textContent = '生成中...';
|
||
showToast('AI 正在生成偏差报告...', 'info');
|
||
setTimeout(function () {
|
||
loading.style.display = 'none';
|
||
result.style.display = 'block';
|
||
genBtn.disabled = false;
|
||
genBtn.textContent = 'AI 辅助生成';
|
||
showToast('偏差报告生成完成', 'success');
|
||
}, 1600);
|
||
});
|
||
}
|
||
|
||
/* ---------- 视图7：实战支撑 ---------- */
|
||
function initEntTraining() {
|
||
// Tab 切换
|
||
var tabWrap = document.querySelector('#view-ent-training .tabs');
|
||
if (tabWrap) {
|
||
tabWrap.querySelectorAll('.tab').forEach(function (t) {
|
||
t.addEventListener('click', function () {
|
||
var key = t.getAttribute('data-tab');
|
||
tabWrap.querySelectorAll('.tab').forEach(function (x) {
|
||
x.classList.remove('active');
|
||
x.style.borderBottom = '';
|
||
x.style.fontWeight = '';
|
||
x.style.color = '#666';
|
||
});
|
||
t.classList.add('active');
|
||
t.style.borderBottom = '2px solid #0ea5e9';
|
||
t.style.marginBottom = '-2px';
|
||
t.style.fontWeight = 'bold';
|
||
t.style.color = '';
|
||
document.querySelectorAll('#view-ent-training [data-tab-content]').forEach(function (c) {
|
||
c.style.display = c.getAttribute('data-tab-content') === key ? '' : 'none';
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
// 场景选择
|
||
document.querySelectorAll('.fly-scene').forEach(function (s) {
|
||
s.addEventListener('click', function () {
|
||
document.querySelectorAll('.fly-scene').forEach(function (x) {
|
||
x.classList.remove('active');
|
||
x.style.border = '1px solid #e5e7eb';
|
||
x.style.background = '';
|
||
});
|
||
s.classList.add('active');
|
||
s.style.border = '2px solid #0ea5e9';
|
||
s.style.background = '#f0f9ff';
|
||
var scene = s.getAttribute('data-scene');
|
||
var names = { gmp: 'GMP飞行检查', gsp: 'GSP飞行检查', di: '数据完整性专项' };
|
||
showToast('已切换场景：' + names[scene], 'info');
|
||
});
|
||
});
|
||
|
||
// 飞检模拟对话 + 追问逻辑
|
||
var box = document.getElementById('flySimMessages');
|
||
var input = document.getElementById('flySimInput');
|
||
var sendBtn = document.getElementById('flySimSend');
|
||
var askCount = 0;
|
||
|
||
var followUps = [
|
||
'贵企业的偏差处理SOP中，偏差如何分级？请说明分级标准。',
|
||
'请举例说明最近一次偏差的处理过程，包括根本原因分析和CAPA。',
|
||
'数据完整性方面，贵企业的电子数据如何保证可追溯？审计追踪是否开启？',
|
||
'质量受权人在放行决策中承担哪些职责？如何确保独立性？',
|
||
'本次模拟结束。感谢配合，您的回答将用于评分分析。'
|
||
];
|
||
|
||
var scoreBoosts = [
|
||
[4, 5, 3, 4, 3, 4], // 每次回答后各维度提升
|
||
[3, 4, 5, 3, 4, 3],
|
||
[2, 3, 6, 4, 3, 5],
|
||
[4, 4, 3, 3, 5, 4]
|
||
];
|
||
|
||
function updateScores(boost) {
|
||
for (var i = 0; i < 6; i++) {
|
||
var el = document.getElementById('sc' + (i + 1));
|
||
var pb = document.getElementById('pb' + (i + 1));
|
||
var cur = parseInt(el.textContent, 10);
|
||
var next = Math.min(98, cur + boost[i]);
|
||
el.textContent = next;
|
||
pb.style.width = next + '%';
|
||
pb.className = 'progress-bar ' + (next >= 80 ? 'green' : next >= 65 ? 'blue' : next >= 50 ? 'orange' : 'red');
|
||
}
|
||
}
|
||
|
||
function send() {
|
||
var q = input.value.trim();
|
||
if (!q) { showToast('请输入您的回答', 'warning'); return; }
|
||
appendMsg(box, 'user', q);
|
||
input.value = '';
|
||
var loading = buildLoadingMsg(box);
|
||
var nextQ = followUps[askCount] || '感谢您的回答，如需继续模拟请保持作答。';
|
||
var boost = scoreBoosts[askCount] || [2, 2, 2, 2, 2, 2];
|
||
setTimeout(function () {
|
||
loading.querySelector('.msg-bubble').innerHTML = '考官：' + nextQ;
|
||
updateScores(boost);
|
||
box.scrollTop = box.scrollHeight;
|
||
askCount++;
|
||
if (askCount >= followUps.length) {
|
||
showToast('模拟已完成，可生成报告', 'success');
|
||
}
|
||
}, 1200);
|
||
}
|
||
|
||
sendBtn.addEventListener('click', send);
|
||
input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); send(); } });
|
||
|
||
// 结束模拟
|
||
document.getElementById('btn-end-sim').addEventListener('click', function () {
|
||
var total = 0;
|
||
for (var i = 1; i <= 6; i++) { total += parseInt(document.getElementById('sc' + i).textContent, 10); }
|
||
var avg = Math.round(total / 6);
|
||
var grade = avg >= 85 ? '优秀' : avg >= 70 ? '良好' : avg >= 60 ? '合格' : '需加强';
|
||
showToast('模拟报告已生成，综合得分 ' + avg + ' 分（' + grade + '）', 'success');
|
||
appendMsg(box, 'ai', '<b>模拟报告</b><br>综合得分：<b>' + avg + '</b> 分<br>评级：' + grade + '<br>建议：' + (avg < 70 ? '建议加强数据完整性与偏差处理培训。' : '整体表现良好，继续保持。'));
|
||
});
|
||
|
||
// 培训助手
|
||
var trainingBtn = document.getElementById('trainingStartBtn');
|
||
if (trainingBtn) {
|
||
trainingBtn.addEventListener('click', function () {
|
||
showToast('开始学习：数据完整性ALCOA+原则', 'info');
|
||
});
|
||
}
|
||
}
|
||
|
||
/* ---------- 通用 Tab 切换兜底（针对主文件未绑定的情况） ---------- */
|
||
function bindGenericTabs() {
|
||
document.querySelectorAll('.tabs').forEach(function (wrap) {
|
||
if (wrap._bound) return;
|
||
wrap._bound = true;
|
||
});
|
||
}
|
||
|
||
/* ---------- 初始化 ---------- */
|
||
function initAll() {
|
||
try { initLegalQA(); } catch (e) { console.error('legalqa', e); }
|
||
try { initDocument(); } catch (e) { console.error('document', e); }
|
||
try { initProfile(); } catch (e) { console.error('profile', e); }
|
||
try { initEntCompliance(); } catch (e) { console.error('ent-compliance', e); }
|
||
try { initEntDocument(); } catch (e) { console.error('ent-document', e); }
|
||
try { initEntTraining(); } catch (e) { console.error('ent-training', e); }
|
||
bindGenericTabs();
|
||
}
|
||
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initAll);
|
||
} else {
|
||
initAll();
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|