1258 lines
96 KiB
HTML
1258 lines
96 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>全周期康复智能一体化管理平台</title>
|
||
<style>
|
||
/* ===== Reset & Base ===== */
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body { font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; background:#f0f4f8; color:#1a2332; font-size:14px; }
|
||
::-webkit-scrollbar { width:6px; }
|
||
::-webkit-scrollbar-track { background:transparent; }
|
||
::-webkit-scrollbar-thumb { background:#d0d7de; border-radius:3px; }
|
||
|
||
/* ===== Layout ===== */
|
||
.app { display:flex; min-height:100vh; }
|
||
.sidebar { width:220px; background:#0f2744; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:100; }
|
||
.main { margin-left:220px; flex:1; min-height:100vh; }
|
||
|
||
/* ===== Sidebar ===== */
|
||
.logo { padding:20px 16px; border-bottom:1px solid rgba(255,255,255,.1); text-align:center; }
|
||
.logo-brand { display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
|
||
.logo-brand svg { height:22px; flex-shrink:0; }
|
||
.logo h2 { color:#5aafe6; font-size:13px; font-weight:600; line-height:1.3; }
|
||
.logo span { color:rgba(255,255,255,.4); font-size:10px; }
|
||
.nav-section { padding:16px 16px 6px; font-size:10px; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:1px; }
|
||
.nav-item { display:flex; align-items:center; padding:9px 16px; color:rgba(255,255,255,.7); font-size:13px; cursor:pointer; transition:all .15s; border-left:3px solid transparent; text-decoration:none; }
|
||
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
|
||
.nav-item.active { background:rgba(24,144,255,.15); color:#40a9ff; border-left-color:#1890ff; }
|
||
.nav-item svg { width:16px; height:16px; margin-right:10px; fill:currentColor; }
|
||
.nav-badge { margin-left:auto; background:#ff4d4f; color:#fff; font-size:11px; padding:1px 6px; border-radius:10px; }
|
||
|
||
/* ===== Page Header ===== */
|
||
.page-header { background:#fff; padding:14px 28px; border-bottom:1px solid #e8edf2; display:flex; align-items:center; justify-content:space-between; }
|
||
.page-header h1 { font-size:16px; font-weight:600; color:#0f2744; }
|
||
.page-header .meta { font-size:12px; color:#8896a7; margin-top:2px; }
|
||
.header-actions { display:flex; gap:8px; }
|
||
|
||
/* ===== Page Content ===== */
|
||
.page-content { padding:24px 28px; }
|
||
.page { display:none; }
|
||
.page.active { display:block; }
|
||
|
||
/* ===== Buttons ===== */
|
||
.btn { padding:7px 16px; border-radius:6px; font-size:13px; font-weight:500; border:none; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:4px; }
|
||
.btn-primary { background:#1890ff; color:#fff; }
|
||
.btn-primary:hover { background:#096dd9; }
|
||
.btn-default { background:#fff; color:#4a5568; border:1px solid #d0d7de; }
|
||
.btn-default:hover { border-color:#1890ff; color:#1890ff; }
|
||
.btn-success { background:#52c41a; color:#fff; }
|
||
.btn-success:hover { background:#389e0d; }
|
||
.btn-danger { background:#ff4d4f; color:#fff; }
|
||
.btn-danger:hover { background:#cf1322; }
|
||
.btn-purple { background:#722ed1; color:#fff; }
|
||
.btn-purple:hover { background:#531dab; }
|
||
.btn-sm { padding:4px 10px; font-size:12px; }
|
||
|
||
/* ===== Tags ===== */
|
||
.tag { padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500; display:inline-block; }
|
||
.tag-blue { background:#e6f7ff; color:#1890ff; }
|
||
.tag-green { background:#f6ffed; color:#52c41a; }
|
||
.tag-orange { background:#fff7e6; color:#fa8c16; }
|
||
.tag-red { background:#fff1f0; color:#ff4d4f; }
|
||
.tag-purple { background:#f9f0ff; color:#722ed1; }
|
||
.tag-gray { background:#f0f4f8; color:#8896a7; }
|
||
.tag-cyan { background:#e6fffb; color:#006d75; }
|
||
|
||
/* ===== Cards ===== */
|
||
.section-card { background:#fff; border:1px solid #e8edf2; border-radius:10px; margin-bottom:20px; transition:all .2s; }
|
||
.section-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.06); }
|
||
.card-header { padding:14px 20px; border-bottom:1px solid #f0f4f8; display:flex; align-items:center; justify-content:space-between; }
|
||
.card-header h3 { font-size:14px; font-weight:600; color:#0f2744; }
|
||
.card-body { padding:20px; }
|
||
|
||
/* ===== Stat Cards ===== */
|
||
.stats-row { display:grid; gap:16px; margin-bottom:24px; }
|
||
.stats-row.cols2 { grid-template-columns:repeat(2,1fr); }
|
||
.stats-row.cols3 { grid-template-columns:repeat(3,1fr); }
|
||
.stats-row.cols4 { grid-template-columns:repeat(4,1fr); }
|
||
.stats-row.cols5 { grid-template-columns:repeat(5,1fr); }
|
||
.stat-card { background:#fff; border:1px solid #e8edf2; border-radius:10px; padding:18px 20px; transition:all .2s; cursor:pointer; }
|
||
.stat-card:hover { transform:translateY(-2px); border-color:#1890ff; box-shadow:0 2px 12px rgba(24,144,255,.12); }
|
||
.stat-label { font-size:12px; color:#8896a7; margin-bottom:6px; }
|
||
.stat-value { font-size:28px; font-weight:700; }
|
||
.stat-value.blue { color:#1890ff; }
|
||
.stat-value.green { color:#52c41a; }
|
||
.stat-value.red { color:#ff4d4f; }
|
||
.stat-value.orange { color:#fa8c16; }
|
||
.stat-value.purple { color:#722ed1; }
|
||
.stat-sub { font-size:11px; color:#8896a7; margin-top:4px; }
|
||
/* ===== Tables ===== */
|
||
.data-table { width:100%; border-collapse:collapse; }
|
||
.data-table th { background:#f8fafc; padding:10px 14px; font-size:12px; font-weight:600; color:#4a5568; text-align:left; border-bottom:1px solid #e8edf2; }
|
||
.data-table td { padding:11px 14px; font-size:13px; border-bottom:1px solid #f0f4f8; }
|
||
.data-table tr:hover td { background:#fafcff; }
|
||
.data-table tr.clickable:hover td { background:#e6f7ff; cursor:pointer; }
|
||
|
||
/* ===== Alerts ===== */
|
||
.alert { padding:10px 14px; border-radius:8px; font-size:13px; border:1px solid; }
|
||
.alert-info { background:#e6f7ff; border-color:#91d5ff; color:#0050b3; }
|
||
.alert-warning { background:#fff7e6; border-color:#ffd591; color:#ad4e00; }
|
||
.alert-success { background:#f6ffed; border-color:#b7eb8f; color:#237804; }
|
||
|
||
/* ===== Forms ===== */
|
||
.form-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
|
||
.form-group { display:flex; flex-direction:column; }
|
||
.form-group.span2 { grid-column:span 2; }
|
||
.form-group.span3 { grid-column:span 3; }
|
||
.form-group label { font-size:12px; font-weight:500; color:#4a5568; margin-bottom:6px; }
|
||
.form-group label .req { color:#ff4d4f; }
|
||
input, select, textarea { border:1px solid #d0d7de; border-radius:6px; padding:8px 10px; font-size:13px; font-family:inherit; transition:border-color .15s; outline:none; width:100%; }
|
||
input:focus, select:focus, textarea:focus { border-color:#1890ff; box-shadow:0 0 0 2px rgba(24,144,255,.1); }
|
||
textarea { resize:vertical; min-height:80px; }
|
||
|
||
/* ===== Modal ===== */
|
||
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center; }
|
||
.modal-overlay.show { display:flex; }
|
||
.modal { background:#fff; border-radius:12px; width:640px; max-height:85vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); }
|
||
.modal-header { padding:18px 24px; border-bottom:1px solid #e8edf2; display:flex; align-items:center; justify-content:space-between; }
|
||
.modal-header h3 { font-size:15px; font-weight:600; color:#0f2744; }
|
||
.modal-close { background:none; border:none; font-size:18px; color:#8896a7; cursor:pointer; padding:4px; }
|
||
.modal-body { padding:24px; }
|
||
.modal-footer { padding:16px 24px; border-top:1px solid #e8edf2; display:flex; justify-content:flex-end; gap:8px; }
|
||
|
||
/* ===== Filter Tabs ===== */
|
||
.filter-tabs { display:flex; gap:8px; margin-bottom:16px; }
|
||
.filter-tab { padding:5px 14px; border-radius:14px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid #e8edf2; background:#fff; color:#4a5568; transition:all .15s; }
|
||
.filter-tab.active, .filter-tab:hover { background:#e6f7ff; border-color:#91d5ff; color:#1890ff; }
|
||
|
||
/* ===== Chart Placeholder ===== */
|
||
.chart-bar-group { display:flex; flex-direction:column; gap:12px; }
|
||
.chart-bar-item { display:flex; align-items:center; gap:10px; }
|
||
.chart-bar-label { font-size:12px; color:#4a5568; width:80px; text-align:right; flex-shrink:0; }
|
||
.chart-bar-track { flex:1; height:20px; background:#f0f4f8; border-radius:3px; overflow:hidden; }
|
||
.chart-bar-fill { height:100%; border-radius:3px; transition:width .3s; }
|
||
.chart-bar-val { font-size:12px; color:#1a2332; font-weight:600; width:50px; }
|
||
|
||
/* ===== Search Bar ===== */
|
||
.search-bar { display:flex; gap:12px; margin-bottom:16px; align-items:center; }
|
||
.search-bar input { max-width:280px; }
|
||
|
||
/* ===== Pagination ===== */
|
||
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:12px 0; }
|
||
.pagination button { padding:4px 10px; border:1px solid #d0d7de; border-radius:4px; background:#fff; font-size:12px; cursor:pointer; }
|
||
.pagination button.active { background:#1890ff; color:#fff; border-color:#1890ff; }
|
||
.pagination span { font-size:12px; color:#8896a7; margin:0 8px; }
|
||
|
||
/* ===== Toast ===== */
|
||
.toast { position:fixed; top:24px; right:24px; background:#fff; border:1px solid #b7eb8f; color:#237804; border-radius:8px; padding:12px 20px; font-size:13px; box-shadow:0 6px 24px rgba(0,0,0,.12); transform:translateX(120%); transition:transform .3s ease; z-index:2000; }
|
||
.toast.show { transform:translateX(0); }
|
||
|
||
/* ===== Progress ===== */
|
||
.progress-bar { height:6px; background:#f0f4f8; border-radius:3px; overflow:hidden; }
|
||
.progress-fill { height:100%; background:linear-gradient(90deg,#722ed1,#1890ff); border-radius:3px; }
|
||
|
||
/* ===== Detail Panel ===== */
|
||
.detail-panel { background:#fafcff; border:1px solid #e8edf2; border-radius:8px; padding:16px; margin-top:8px; display:none; }
|
||
.detail-panel.show { display:block; }
|
||
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
|
||
.detail-item label { font-size:11px; color:#8896a7; display:block; margin-bottom:2px; }
|
||
.detail-item span { font-size:13px; color:#1a2332; }
|
||
|
||
/* ===== Knowledge Card ===== */
|
||
.knowledge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
|
||
.knowledge-card { border:1px solid #e8edf2; border-radius:10px; overflow:hidden; cursor:pointer; transition:all .2s; }
|
||
.knowledge-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.06); transform:translateY(-2px); }
|
||
.knowledge-thumb { height:120px; background:#e6f7ff; display:flex; align-items:center; justify-content:center; font-size:32px; }
|
||
.knowledge-thumb.video { background:#f9f0ff; }
|
||
.knowledge-info { padding:12px; }
|
||
.knowledge-info h4 { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||
.knowledge-info p { font-size:11px; color:#8896a7; }
|
||
.knowledge-tags { display:flex; gap:4px; margin-top:8px; }
|
||
|
||
/* ===== Chat ===== */
|
||
.chat-container { border:1px solid #e8edf2; border-radius:10px; overflow:hidden; height:400px; display:flex; flex-direction:column; }
|
||
.chat-header { padding:14px 16px; background:#fff; border-bottom:1px solid #e8edf2; display:flex; align-items:center; justify-content:space-between; }
|
||
.chat-body { flex:1; overflow-y:auto; padding:16px; background:#fafcff; }
|
||
.chat-msg { display:flex; gap:8px; margin-bottom:16px; }
|
||
.chat-msg.user { flex-direction:row-reverse; }
|
||
.chat-avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex-shrink:0; }
|
||
.chat-avatar.staff { background:#1890ff; }
|
||
.chat-avatar.patient { background:#52c41a; }
|
||
.chat-bubble { max-width:70%; padding:10px 14px; font-size:13px; line-height:1.6; }
|
||
.chat-msg:not(.user) .chat-bubble { background:#fff; border:1px solid #e8edf2; border-radius:0 12px 12px 12px; }
|
||
.chat-msg.user .chat-bubble { background:#1890ff; color:#fff; border-radius:12px 0 12px 12px; }
|
||
.chat-footer { padding:12px 16px; background:#fff; border-top:1px solid #e8edf2; display:flex; gap:8px; }
|
||
.chat-footer input { flex:1; }
|
||
.chat-time { font-size:10px; color:#8896a7; margin-top:4px; }
|
||
|
||
/* ===== Template Card ===== */
|
||
.template-list { display:flex; flex-direction:column; gap:12px; }
|
||
.template-item { border:1px solid #e8edf2; border-radius:8px; padding:16px; display:flex; align-items:center; justify-content:space-between; transition:all .15s; }
|
||
.template-item:hover { border-color:#1890ff; background:#fafcff; }
|
||
.template-info h4 { font-size:13px; font-weight:600; margin-bottom:4px; }
|
||
.template-info p { font-size:12px; color:#8896a7; }
|
||
.template-meta { display:flex; gap:8px; margin-top:6px; }
|
||
|
||
/* ===== Settings ===== */
|
||
.settings-section { margin-bottom:24px; }
|
||
.settings-section h4 { font-size:13px; font-weight:600; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #f0f4f8; }
|
||
.settings-item { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f4f8; }
|
||
.settings-item:last-child { border-bottom:none; }
|
||
.settings-item label { font-size:13px; color:#1a2332; }
|
||
.settings-item .desc { font-size:11px; color:#8896a7; }
|
||
.toggle { width:40px; height:22px; background:#d0d7de; border-radius:11px; position:relative; cursor:pointer; transition:all .15s; }
|
||
.toggle.on { background:#1890ff; }
|
||
.toggle::after { content:''; position:absolute; width:18px; height:18px; background:#fff; border-radius:50%; top:2px; left:2px; transition:all .15s; }
|
||
.toggle.on::after { left:20px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<!-- Sidebar -->
|
||
<div class="sidebar">
|
||
<div class="logo">
|
||
<div class="logo-brand">
|
||
<img src="logo.png" alt="XiruiMed熹睿" style="height:20px;filter:brightness(1.15);">
|
||
</div>
|
||
<h2>全周期康复智能一体化管理平台</h2>
|
||
</div>
|
||
<div class="nav-section">概览</div>
|
||
<a class="nav-item active" onclick="navTo('dashboard',this)">
|
||
<svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
|
||
工作台
|
||
</a>
|
||
<div class="nav-section">患者管理</div>
|
||
<a class="nav-item" onclick="navTo('patients',this)">
|
||
<svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
|
||
患者列表
|
||
<span class="nav-badge">128</span>
|
||
</a>
|
||
<a class="nav-item" onclick="navTo('assessments',this)">
|
||
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
|
||
评估记录
|
||
</a>
|
||
<a class="nav-item" onclick="navTo('alerts',this)">
|
||
<svg viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
|
||
预警中心
|
||
<span class="nav-badge">5</span>
|
||
</a>
|
||
<div class="nav-section">内容管理</div>
|
||
<a class="nav-item" onclick="navTo('knowledge',this)">
|
||
<svg viewBox="0 0 24 24"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></svg>
|
||
知识库
|
||
</a>
|
||
<a class="nav-item" onclick="navTo('templates',this)">
|
||
<svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
|
||
康复模板
|
||
</a>
|
||
<div class="nav-section">互动</div>
|
||
<a class="nav-item" onclick="navTo('consult',this)">
|
||
<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
|
||
咨询管理
|
||
<span class="nav-badge">3</span>
|
||
</a>
|
||
<div class="nav-section">数据</div>
|
||
<a class="nav-item" onclick="navTo('reports',this)">
|
||
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
|
||
数据报表
|
||
</a>
|
||
<div class="nav-section">系统</div>
|
||
<a class="nav-item" onclick="navTo('settings',this)">
|
||
<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
|
||
系统设置
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="main">
|
||
<!-- ===== Dashboard ===== -->
|
||
<div id="page-dashboard" class="page active">
|
||
<div class="page-header">
|
||
<div><h1>工作台</h1><div class="meta">全周期康复智能一体化管理平台 · 数据概览</div></div>
|
||
<div class="header-actions">
|
||
<button class="btn btn-default">导出报表</button>
|
||
<button class="btn btn-primary">+ 新增患者</button>
|
||
</div>
|
||
</div>
|
||
<div class="page-content">
|
||
<!-- Alert -->
|
||
<div class="alert alert-warning" style="margin-bottom:20px;">
|
||
<strong>⚠ 预警提醒:</strong>当前有 <strong>5</strong> 条异常指标预警待处理,请及时查看。
|
||
</div>
|
||
<!-- Stats -->
|
||
<div class="stats-row cols5">
|
||
<div class="stat-card"><div class="stat-label">在管患者</div><div class="stat-value blue">128</div><div class="stat-sub">本月新增 23 人</div></div>
|
||
<div class="stat-card"><div class="stat-label">今日打卡率</div><div class="stat-value green">87%</div><div class="stat-sub">较昨日 +3%</div></div>
|
||
<div class="stat-card"><div class="stat-label">待处理预警</div><div class="stat-value red">5</div><div class="stat-sub">皮瓣异常 3 · 疼痛 2</div></div>
|
||
<div class="stat-card"><div class="stat-label">待回复咨询</div><div class="stat-value orange">3</div><div class="stat-sub">平均等待 15 分钟</div></div>
|
||
<div class="stat-card"><div class="stat-label">本月随访</div><div class="stat-value purple">42</div><div class="stat-sub">完成率 89%</div></div>
|
||
</div>
|
||
<!-- Two columns -->
|
||
<div class="stats-row cols2">
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>患者分布</h3><span class="tag tag-blue">按手术类型</span></div>
|
||
<div class="card-body">
|
||
<div class="chart-placeholder">
|
||
<div class="chart-bar-group">
|
||
<div class="chart-bar-item"><span class="chart-bar-label">皮瓣修复</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:45%;background:#1890ff;"></div></div><span class="chart-bar-val">58人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">关节置换</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:30%;background:#52c41a;"></div></div><span class="chart-bar-val">38人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">血管重建</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:25%;background:#722ed1;"></div></div><span class="chart-bar-val">32人</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>康复阶段分布</h3><span class="tag tag-green">实时</span></div>
|
||
<div class="card-body">
|
||
<div class="chart-placeholder">
|
||
<div class="chart-bar-group">
|
||
<div class="chart-bar-item"><span class="chart-bar-label">决策期</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:15%;background:#fa8c16;"></div></div><span class="chart-bar-val">19人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">围术期</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:25%;background:#1890ff;"></div></div><span class="chart-bar-val">32人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">术后1-7天</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:20%;background:#722ed1;"></div></div><span class="chart-bar-val">26人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">术后8-14天</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:18%;background:#52c41a;"></div></div><span class="chart-bar-val">23人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">康复1-3月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:22%;background:#ff4d4f;"></div></div><span class="chart-bar-val">28人</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Recent Alerts Table -->
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>最近预警</h3><button class="btn btn-sm btn-default" onclick="navTo('alerts',document.querySelectorAll('.nav-item')[3])">查看全部</button></div>
|
||
<div class="card-body" style="padding:0;">
|
||
<table class="data-table">
|
||
<thead><tr><th>时间</th><th>患者</th><th>手术类型</th><th>预警类型</th><th>详情</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>2026-04-16 09:32</td><td>张**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-red">皮瓣异常</span></td><td>皮瓣颜色苍白,毛细血管反应减弱</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-alert-handle')">处理</button></td></tr>
|
||
<tr><td>2026-04-16 08:15</td><td>李**</td><td><span class="tag tag-green">关节置换</span></td><td><span class="tag tag-orange">疼痛异常</span></td><td>疼痛评分 8/10,超出阈值</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-alert-handle')">处理</button></td></tr>
|
||
<tr><td>2026-04-15 21:40</td><td>王**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-red">皮瓣异常</span></td><td>皮瓣颜色发紫,肿胀加重</td><td><span class="tag tag-green">已处理</span></td><td><button class="btn btn-sm btn-default">详情</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ===== Patients Page ===== -->
|
||
<div id="page-patients" class="page">
|
||
<div class="page-header">
|
||
<div><h1>患者列表</h1><div class="meta">共 128 位在管患者</div></div>
|
||
<div class="header-actions">
|
||
<button class="btn btn-default">导出数据</button>
|
||
<button class="btn btn-primary" onclick="showModal('modal-new-patient')">+ 新增患者</button>
|
||
</div>
|
||
</div>
|
||
<div class="page-content">
|
||
<div class="section-card">
|
||
<div class="card-body">
|
||
<div class="filter-tabs">
|
||
<span class="filter-tab active">全部 (128)</span>
|
||
<span class="filter-tab">皮瓣修复 (58)</span>
|
||
<span class="filter-tab">关节置换 (38)</span>
|
||
<span class="filter-tab">血管重建 (32)</span>
|
||
</div>
|
||
<div class="search-bar">
|
||
<input type="text" placeholder="搜索患者姓名、手机号...">
|
||
<select style="width:140px;"><option>全部阶段</option><option>决策期</option><option>围术期</option><option>术后1-7天</option><option>术后8-14天</option><option>康复1-3月</option><option>康复6个月</option></select>
|
||
<select style="width:120px;"><option>全部状态</option><option>正常</option><option>预警中</option></select>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead><tr><th>患者编号</th><th>姓名</th><th>性别/年龄</th><th>手术类型</th><th>康复阶段</th><th>打卡率</th><th>最近预警</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr class="clickable"><td>P20260301</td><td>张**</td><td>男 / 52岁</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-cyan">术后8-14天</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:92%;"></div></div><span style="font-size:11px;margin-left:4px;">92%</span></td><td><span class="tag tag-red">皮瓣苍白</span></td><td><span class="tag tag-orange">预警中</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-patient-detail')">查看</button></td></tr>
|
||
<tr class="clickable"><td>P20260302</td><td>李**</td><td>女 / 67岁</td><td><span class="tag tag-green">关节置换</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:85%;"></div></div><span style="font-size:11px;margin-left:4px;">85%</span></td><td><span class="tag tag-orange">疼痛8分</span></td><td><span class="tag tag-orange">预警中</span></td><td><button class="btn btn-sm btn-primary">查看</button></td></tr>
|
||
<tr class="clickable"><td>P20260303</td><td>王**</td><td>男 / 45岁</td><td><span class="tag tag-purple">血管重建</span></td><td><span class="tag tag-cyan">术后1-7天</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:100%;"></div></div><span style="font-size:11px;margin-left:4px;">100%</span></td><td><span class="tag tag-gray">无</span></td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">查看</button></td></tr>
|
||
<tr class="clickable"><td>P20260304</td><td>赵**</td><td>女 / 58岁</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:78%;"></div></div><span style="font-size:11px;margin-left:4px;">78%</span></td><td><span class="tag tag-gray">无</span></td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">查看</button></td></tr>
|
||
<tr class="clickable"><td>P20260305</td><td>陈**</td><td>男 / 71岁</td><td><span class="tag tag-green">关节置换</span></td><td><span class="tag tag-cyan">围术期</span></td><td><div class="progress-bar" style="width:80px;"><div class="progress-fill" style="width:60%;"></div></div><span style="font-size:11px;margin-left:4px;">60%</span></td><td><span class="tag tag-gray">无</span></td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">查看</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination">
|
||
<button><</button><button class="active">1</button><button>2</button><button>3</button><button>...</button><button>13</button><button>></button>
|
||
<span>共 128 条</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Assessments Page ===== -->
|
||
<div id="page-assessments" class="page">
|
||
<div class="page-header">
|
||
<div><h1>评估记录</h1><div class="meta">患者评估量表与指标记录</div></div>
|
||
<div class="header-actions"><button class="btn btn-default">导出数据</button></div>
|
||
</div>
|
||
<div class="page-content">
|
||
<div class="stats-row cols4">
|
||
<div class="stat-card"><div class="stat-label">今日评估</div><div class="stat-value blue">34</div><div class="stat-sub">疼痛评分 18 · FJS 8 · 其他 8</div></div>
|
||
<div class="stat-card"><div class="stat-label">异常指标</div><div class="stat-value red">7</div><div class="stat-sub">需关注</div></div>
|
||
<div class="stat-card"><div class="stat-label">平均疼痛评分</div><div class="stat-value orange">3.2</div><div class="stat-sub">较上周 -0.5</div></div>
|
||
<div class="stat-card"><div class="stat-label">FJS 平均分</div><div class="stat-value green">72</div><div class="stat-sub">关节置换患者</div></div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>评估记录列表</h3></div>
|
||
<div class="card-body">
|
||
<div class="filter-tabs">
|
||
<span class="filter-tab active">全部</span>
|
||
<span class="filter-tab">疼痛评分</span>
|
||
<span class="filter-tab">FJS评分</span>
|
||
<span class="filter-tab">皮瓣观察</span>
|
||
<span class="filter-tab">血糖记录</span>
|
||
<span class="filter-tab">关节活动度</span>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead><tr><th>时间</th><th>患者</th><th>评估类型</th><th>结果</th><th>是否异常</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>2026-04-16 10:20</td><td>张**</td><td>皮瓣观察</td><td>颜色苍白 · 肿胀中度 · 毛细血管反应减弱</td><td><span class="tag tag-red">异常</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-assess-detail')">详情</button></td></tr>
|
||
<tr><td>2026-04-16 09:45</td><td>李**</td><td>疼痛评分</td><td>VAS 8/10</td><td><span class="tag tag-red">异常</span></td><td><button class="btn btn-sm btn-primary">详情</button></td></tr>
|
||
<tr><td>2026-04-16 09:30</td><td>王**</td><td>血糖记录</td><td>空腹 5.8 mmol/L</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">详情</button></td></tr>
|
||
<tr><td>2026-04-16 08:50</td><td>赵**</td><td>FJS评分</td><td>68分</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">详情</button></td></tr>
|
||
<tr><td>2026-04-16 08:15</td><td>陈**</td><td>关节活动度</td><td>屈曲 95° · 伸展 -5°</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-primary">详情</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Alerts Page ===== -->
|
||
<div id="page-alerts" class="page">
|
||
<div class="page-header">
|
||
<div><h1>预警中心</h1><div class="meta">异常指标预警与处理</div></div>
|
||
</div>
|
||
<div class="page-content">
|
||
<div class="stats-row cols4">
|
||
<div class="stat-card"><div class="stat-label">待处理预警</div><div class="stat-value red">5</div><div class="stat-sub">需立即关注</div></div>
|
||
<div class="stat-card"><div class="stat-label">今日新增</div><div class="stat-value orange">3</div><div class="stat-sub">皮瓣 2 · 疼痛 1</div></div>
|
||
<div class="stat-card"><div class="stat-label">已处理</div><div class="stat-value green">12</div><div class="stat-sub">本周累计</div></div>
|
||
<div class="stat-card"><div class="stat-label">平均响应</div><div class="stat-value blue">18min</div><div class="stat-sub">目标 ≤30min</div></div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>预警列表</h3></div>
|
||
<div class="card-body">
|
||
<div class="filter-tabs">
|
||
<span class="filter-tab active">待处理 (5)</span>
|
||
<span class="filter-tab">已处理 (12)</span>
|
||
<span class="filter-tab">全部</span>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead><tr><th>预警时间</th><th>患者</th><th>手术类型</th><th>预警类型</th><th>预警详情</th><th>建议措施</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>04-16 09:32</td><td>张**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-red">紧急</span></td><td>皮瓣颜色苍白,毛细血管反应减弱</td><td>请抬高患肢,注意保暖,并联系医生</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-alert-handle')">处理</button></td></tr>
|
||
<tr><td>04-16 08:15</td><td>李**</td><td><span class="tag tag-green">关节置换</span></td><td><span class="tag tag-orange">警告</span></td><td>疼痛评分 8/10,超出阈值</td><td>建议调整镇痛方案,必要时联系医生</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary">处理</button></td></tr>
|
||
<tr><td>04-16 07:50</td><td>刘**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-red">紧急</span></td><td>皮瓣颜色发紫,肿胀程度加重</td><td>立即联系主治医生,避免压迫患处</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary">处理</button></td></tr>
|
||
<tr><td>04-15 21:40</td><td>王**</td><td><span class="tag tag-purple">血管重建</span></td><td><span class="tag tag-orange">警告</span></td><td>血糖 12.5 mmol/L,高于正常范围</td><td>注意饮食控制,监测血糖变化</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary">处理</button></td></tr>
|
||
<tr><td>04-15 18:20</td><td>孙**</td><td><span class="tag tag-blue">皮瓣修复</span></td><td><span class="tag tag-orange">警告</span></td><td>术后伤口渗液增多</td><td>保持伤口清洁,及时换药</td><td><span class="tag tag-orange">待处理</span></td><td><button class="btn btn-sm btn-primary">处理</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Knowledge Page ===== -->
|
||
<div id="page-knowledge" class="page">
|
||
<!-- KB List View -->
|
||
<div id="kb-list">
|
||
<div class="page-header">
|
||
<div><h1>知识库</h1><div class="meta">结构化康复知识内容管理 · 支持按病种、按阶段精确匹配推送</div></div>
|
||
<div class="header-actions">
|
||
<button class="btn btn-default">批量导入</button>
|
||
<button class="btn btn-primary" onclick="showModal('modal-new-article')">+ 新增内容</button>
|
||
</div>
|
||
</div>
|
||
<div class="page-content">
|
||
<!-- Stats -->
|
||
<div class="stats-row cols4">
|
||
<div class="stat-card"><div class="stat-label">知识总量</div><div class="stat-value blue">86</div><div class="stat-sub">图文 62 · 视频 24</div></div>
|
||
<div class="stat-card"><div class="stat-label">病种覆盖</div><div class="stat-value green">10</div><div class="stat-sub">A-J 类全覆盖</div></div>
|
||
<div class="stat-card"><div class="stat-label">阶段覆盖</div><div class="stat-value purple">6</div><div class="stat-sub">决策期 → 康复6月</div></div>
|
||
<div class="stat-card"><div class="stat-label">本月阅读</div><div class="stat-value orange">1,247</div><div class="stat-sub">人均 9.7 篇</div></div>
|
||
</div>
|
||
<!-- Disease Classification -->
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>病种分类(A-J类)</h3><span class="tag tag-blue">结构化标签体系</span></div>
|
||
<div class="card-body" style="padding:12px 20px;">
|
||
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;">
|
||
<div style="background:#e6f7ff;border:1px solid #91d5ff;border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .15s;" onclick="this.style.borderColor='#1890ff';this.style.boxShadow='0 0 0 2px rgba(24,144,255,.15)'">
|
||
<div style="font-size:16px;font-weight:700;color:#1890ff;">A</div><div style="font-size:11px;color:#4a5568;">游离皮瓣</div><div style="font-size:10px;color:#8896a7;">12篇</div></div>
|
||
<div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
|
||
<div style="font-size:16px;font-weight:700;color:#52c41a;">B</div><div style="font-size:11px;color:#4a5568;">带蒂皮瓣</div><div style="font-size:10px;color:#8896a7;">10篇</div></div>
|
||
<div style="background:#f9f0ff;border:1px solid #d3adf7;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
|
||
<div style="font-size:16px;font-weight:700;color:#722ed1;">C</div><div style="font-size:11px;color:#4a5568;">膝关节置换</div><div style="font-size:10px;color:#8896a7;">9篇</div></div>
|
||
<div style="background:#fff7e6;border:1px solid #ffd591;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
|
||
<div style="font-size:16px;font-weight:700;color:#fa8c16;">D</div><div style="font-size:11px;color:#4a5568;">髋关节置换</div><div style="font-size:10px;color:#8896a7;">8篇</div></div>
|
||
<div style="background:#e6fffb;border:1px solid #87e8de;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
|
||
<div style="font-size:16px;font-weight:700;color:#006d75;">E</div><div style="font-size:11px;color:#4a5568;">血管吻合重建</div><div style="font-size:10px;color:#8896a7;">8篇</div></div>
|
||
<div style="background:#fff1f0;border:1px solid #ffa39e;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
|
||
<div style="font-size:16px;font-weight:700;color:#ff4d4f;">F</div><div style="font-size:11px;color:#4a5568;">动脉修复</div><div style="font-size:10px;color:#8896a7;">7篇</div></div>
|
||
<div style="background:#e6f7ff;border:1px solid #91d5ff;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
|
||
<div style="font-size:16px;font-weight:700;color:#1890ff;">G</div><div style="font-size:11px;color:#4a5568;">静脉重建</div><div style="font-size:10px;color:#8896a7;">6篇</div></div>
|
||
<div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
|
||
<div style="font-size:16px;font-weight:700;color:#52c41a;">H</div><div style="font-size:11px;color:#4a5568;">神经修复</div><div style="font-size:10px;color:#8896a7;">6篇</div></div>
|
||
<div style="background:#f9f0ff;border:1px solid #d3adf7;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
|
||
<div style="font-size:16px;font-weight:700;color:#722ed1;">I</div><div style="font-size:11px;color:#4a5568;">骨缺损修复</div><div style="font-size:10px;color:#8896a7;">5篇</div></div>
|
||
<div style="background:#f0f4f8;border:1px solid #d0d7de;border-radius:8px;padding:10px;text-align:center;cursor:pointer;">
|
||
<div style="font-size:16px;font-weight:700;color:#4a5568;">J</div><div style="font-size:11px;color:#4a5568;">其他/通用</div><div style="font-size:10px;color:#8896a7;">15篇</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Content List -->
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>内容列表</h3><span style="font-size:12px;color:#8896a7;">共 86 条</span></div>
|
||
<div class="card-body">
|
||
<div class="filter-tabs">
|
||
<span class="filter-tab active">全部 (86)</span>
|
||
<span class="filter-tab">皮瓣修复 (22)</span>
|
||
<span class="filter-tab">关节置换 (17)</span>
|
||
<span class="filter-tab">血管重建 (14)</span>
|
||
<span class="filter-tab">通用 (15)</span>
|
||
<span class="filter-tab">待审核 (3)</span>
|
||
</div>
|
||
<div class="search-bar">
|
||
<input type="text" placeholder="搜索标题、关键词:疼痛、营养、心理、锻炼...">
|
||
<select style="width:100px;"><option>全部类型</option><option>图文</option><option>视频</option></select>
|
||
<select style="width:100px;"><option>全部病种</option><option>A 游离皮瓣</option><option>B 带蒂皮瓣</option><option>C 膝关节</option><option>D 髋关节</option><option>E 血管吻合</option><option>F 动脉修复</option><option>G 静脉重建</option><option>H 神经修复</option><option>I 骨缺损</option><option>J 通用</option></select>
|
||
<select style="width:110px;"><option>全部阶段</option><option>决策期</option><option>围术期</option><option>术后1-7天</option><option>术后8-14天</option><option>康复1-3月</option><option>康复6个月</option></select>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead><tr><th style="width:40px;">ID</th><th>标题</th><th>类型</th><th>病种分类</th><th>适用阶段</th><th>关键词</th><th>阅读量</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr class="clickable" onclick="showKbDetail()"><td>K001</td><td style="font-weight:500;">皮瓣术后观察要点:颜色、肿胀与毛细血管反应</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-blue">A 游离皮瓣</span></td><td><span class="tag tag-cyan">术后1-7天</span></td><td style="font-size:11px;color:#8896a7;">皮瓣观察、颜色、肿胀</td><td>234</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
|
||
<tr class="clickable" onclick="showKbDetail()"><td>K002</td><td style="font-weight:500;">踝泵运动指导视频 — 预防深静脉血栓</td><td><span class="tag tag-purple">视频</span></td><td><span class="tag tag-green">C 膝关节</span></td><td><span class="tag tag-cyan">术后1-7天</span></td><td style="font-size:11px;color:#8896a7;">锻炼、血栓预防</td><td>189</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
|
||
<tr class="clickable" onclick="showKbDetail()"><td>K003</td><td style="font-weight:500;">术后营养饮食指南 — 促进伤口愈合</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-gray">J 通用</span></td><td><span class="tag tag-cyan">围术期</span></td><td style="font-size:11px;color:#8896a7;">营养、饮食、愈合</td><td>312</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
|
||
<tr class="clickable" onclick="showKbDetail()"><td>K004</td><td style="font-weight:500;">居家伤口护理与换药操作指南</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-blue">A 游离皮瓣</span></td><td><span class="tag tag-cyan">术后8-14天</span></td><td style="font-size:11px;color:#8896a7;">伤口护理、换药</td><td>278</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
|
||
<tr class="clickable" onclick="showKbDetail()"><td>K005</td><td style="font-weight:500;">关节置换术后康复锻炼(1-3月阶段)</td><td><span class="tag tag-purple">视频</span></td><td><span class="tag tag-green">C 膝关节</span> <span class="tag tag-orange">D 髋关节</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td style="font-size:11px;color:#8896a7;">锻炼、关节活动度</td><td>156</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
|
||
<tr class="clickable" onclick="showKbDetail()"><td>K006</td><td style="font-weight:500;">术后心理调适 — 应对焦虑与情绪低落</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-gray">J 通用</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td style="font-size:11px;color:#8896a7;">心理、焦虑、情绪</td><td>198</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
|
||
<tr class="clickable" onclick="showKbDetail()"><td>K007</td><td style="font-weight:500;">血管重建术后肢体保暖与血运观察</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-purple">E 血管吻合</span></td><td><span class="tag tag-cyan">术后1-7天</span></td><td style="font-size:11px;color:#8896a7;">血运、保暖、观察</td><td>87</td><td><span class="tag tag-green">已发布</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
|
||
<tr class="clickable" onclick="showKbDetail()"><td>K008</td><td style="font-weight:500;">瘢痕管理与预防指南(新)</td><td><span class="tag tag-blue">图文</span></td><td><span class="tag tag-blue">A 游离皮瓣</span> <span class="tag tag-blue">B 带蒂皮瓣</span></td><td><span class="tag tag-cyan">康复1-3月</span></td><td style="font-size:11px;color:#8896a7;">瘢痕、预防</td><td>0</td><td><span class="tag tag-orange">待审核</span></td><td><button class="btn btn-sm btn-default" onclick="event.stopPropagation();showKbDetail()">查看</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="pagination">
|
||
<button><</button><button class="active">1</button><button>2</button><button>3</button><button>...</button><button>9</button><button>></button>
|
||
<span>共 86 条</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Stage-Content Matrix -->
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>阶段-内容匹配矩阵</h3><span class="tag tag-purple">自动推送依据</span></div>
|
||
<div class="card-body" style="padding:0;">
|
||
<table class="data-table" style="font-size:12px;">
|
||
<thead><tr><th>康复阶段</th><th>皮瓣修复 (A/B)</th><th>关节置换 (C/D)</th><th>血管重建 (E/F/G)</th><th>通用 (J)</th><th>合计</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><span class="tag tag-orange">决策期</span></td><td>3篇</td><td>3篇</td><td>2篇</td><td>4篇</td><td style="font-weight:600;">12</td></tr>
|
||
<tr><td><span class="tag tag-blue">围术期</span></td><td>4篇</td><td>3篇</td><td>3篇</td><td>5篇</td><td style="font-weight:600;">15</td></tr>
|
||
<tr><td><span class="tag tag-purple">术后1-7天</span></td><td>5篇</td><td>4篇</td><td>4篇</td><td>3篇</td><td style="font-weight:600;">16</td></tr>
|
||
<tr><td><span class="tag tag-cyan">术后8-14天</span></td><td>4篇</td><td>3篇</td><td>2篇</td><td>2篇</td><td style="font-weight:600;">11</td></tr>
|
||
<tr><td><span class="tag tag-green">康复1-3月</span></td><td>4篇</td><td>5篇</td><td>3篇</td><td>6篇</td><td style="font-weight:600;">18</td></tr>
|
||
<tr><td><span class="tag tag-green">康复6个月</span></td><td>3篇</td><td>3篇</td><td>2篇</td><td>6篇</td><td style="font-weight:600;">14</td></tr>
|
||
<tr style="background:#f8fafc;font-weight:600;"><td>合计</td><td>23</td><td>21</td><td>16</td><td>26</td><td style="color:#1890ff;">86</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- KB Detail View -->
|
||
<div id="kb-detail" style="display:none;">
|
||
<div class="page-header">
|
||
<div>
|
||
<div style="display:flex;align-items:center;gap:8px;"><span style="color:#1890ff;cursor:pointer;font-size:13px;" onclick="hideKbDetail()">← 返回知识库列表</span></div>
|
||
<h1 style="margin-top:4px;">皮瓣术后观察要点:颜色、肿胀与毛细血管反应</h1>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="btn btn-default">编辑内容</button>
|
||
<button class="btn btn-primary">手动推送</button>
|
||
</div>
|
||
</div>
|
||
<div class="page-content">
|
||
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
||
<span class="tag tag-blue" style="padding:4px 12px;">图文</span>
|
||
<span class="tag tag-blue" style="padding:4px 12px;">A 游离皮瓣</span>
|
||
<span class="tag tag-blue" style="padding:4px 12px;">B 带蒂皮瓣</span>
|
||
<span class="tag tag-cyan" style="padding:4px 12px;">术后1-7天</span>
|
||
<span class="tag tag-cyan" style="padding:4px 12px;">术后8-14天</span>
|
||
<span class="tag tag-green" style="padding:4px 12px;">已发布</span>
|
||
</div>
|
||
<div class="stats-row cols4">
|
||
<div class="stat-card" style="padding:14px;"><div class="stat-label">创建时间</div><div style="font-size:14px;font-weight:600;margin-top:4px;">2026-03-15</div></div>
|
||
<div class="stat-card" style="padding:14px;"><div class="stat-label">最后更新</div><div style="font-size:14px;font-weight:600;margin-top:4px;">2026-04-10</div></div>
|
||
<div class="stat-card" style="padding:14px;"><div class="stat-label">阅读量</div><div style="font-size:14px;font-weight:600;color:#1890ff;margin-top:4px;">234 次</div></div>
|
||
<div class="stat-card" style="padding:14px;"><div class="stat-label">推送患者</div><div style="font-size:14px;font-weight:600;color:#722ed1;margin-top:4px;">58 人</div></div>
|
||
</div>
|
||
<div class="stats-row cols2">
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>基本信息</h3></div>
|
||
<div class="card-body" style="padding:8px 20px;">
|
||
<div class="detail-grid">
|
||
<div class="detail-item"><label>来源文档</label><span>皮瓣康复指导手册.docx</span></div>
|
||
<div class="detail-item"><label>审核人</label><span>陈主任</span></div>
|
||
</div>
|
||
<div style="margin-top:12px;">
|
||
<div style="font-size:12px;color:#8896a7;margin-bottom:6px;">关键词标签</div>
|
||
<div style="display:flex;gap:6px;flex-wrap:wrap;">
|
||
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">皮瓣观察</span>
|
||
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">颜色判断</span>
|
||
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">肿胀评估</span>
|
||
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">毛细血管反应</span>
|
||
<span style="background:#e6f7ff;border:1px solid #91d5ff;color:#1890ff;border-radius:14px;padding:3px 10px;font-size:12px;">血运监测</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>推送记录</h3></div>
|
||
<div class="card-body" style="padding:0;">
|
||
<table class="data-table" style="font-size:12px;">
|
||
<thead><tr><th>推送时间</th><th>推送对象</th><th>触发条件</th><th>阅读状态</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>2026-04-16</td><td>张** 等 3 人</td><td>进入"术后1-7天"</td><td><span class="tag tag-green">已读 2</span> <span class="tag tag-gray">未读 1</span></td></tr>
|
||
<tr><td>2026-04-14</td><td>刘** 等 2 人</td><td>进入"术后1-7天"</td><td><span class="tag tag-green">已读 2</span></td></tr>
|
||
<tr><td>2026-04-10</td><td>赵** 等 5 人</td><td>进入"术后1-7天"</td><td><span class="tag tag-green">已读 4</span> <span class="tag tag-gray">未读 1</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Content Body -->
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>正文内容(通俗化版本)</h3><span class="tag tag-purple">面向患者</span></div>
|
||
<div class="card-body" style="font-size:13px;color:#4a5568;line-height:2;">
|
||
<p style="margin-bottom:12px;"><strong style="color:#1a2332;">一、为什么要观察皮瓣?</strong></p>
|
||
<p style="margin-bottom:12px;">皮瓣手术后,移植的皮肤需要重新建立血液供应。术后早期是最关键的时期,通过观察皮瓣的颜色、肿胀和毛细血管反应,可以及时发现血液供应是否正常。</p>
|
||
<p style="margin-bottom:12px;"><strong style="color:#1a2332;">二、怎么看皮瓣颜色?</strong></p>
|
||
<p style="margin-bottom:8px;">正常的皮瓣应该是<span style="color:#52c41a;font-weight:600;">红润</span>的,和周围正常皮肤颜色接近。需要注意以下异常情况:</p>
|
||
<ul style="padding-left:20px;margin-bottom:12px;">
|
||
<li><span style="color:#fa8c16;font-weight:500;">苍白</span> — 可能是动脉供血不足,需要立即通知医生</li>
|
||
<li><span style="color:#ff4d4f;font-weight:500;">发紫/暗红</span> — 可能是静脉回流受阻,同样需要紧急处理</li>
|
||
<li><span style="color:#52c41a;font-weight:500;">红润</span> — 血液供应正常,继续观察即可</li>
|
||
</ul>
|
||
<p style="margin-bottom:12px;"><strong style="color:#1a2332;">三、毛细血管反应怎么测?</strong></p>
|
||
<p style="margin-bottom:8px;">用手指轻轻按压皮瓣表面2秒后松开:</p>
|
||
<ul style="padding-left:20px;margin-bottom:12px;">
|
||
<li><span style="color:#52c41a;">正常</span>:1-2秒内恢复红色</li>
|
||
<li><span style="color:#fa8c16;">减弱</span>:超过3秒才恢复,需要关注</li>
|
||
<li><span style="color:#ff4d4f;">消失</span>:按压后不变色或长时间不恢复,立即联系医生</li>
|
||
</ul>
|
||
<p><strong style="color:#1a2332;">四、肿胀怎么判断?</strong></p>
|
||
<p>术后早期轻度肿胀是正常的。如果肿胀持续加重、皮肤发亮发紧,或伴有疼痛加剧,请及时联系医护人员。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Templates Page ===== -->
|
||
<div id="page-templates" class="page">
|
||
<!-- List View -->
|
||
<div id="tpl-list">
|
||
<div class="page-header">
|
||
<div><h1>康复模板</h1><div class="meta">康复计划模板配置与管理</div></div>
|
||
<div class="header-actions"><button class="btn btn-primary" onclick="showModal('modal-new-template')">+ 新建模板</button></div>
|
||
</div>
|
||
<div class="page-content">
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>模板列表</h3><span style="font-size:12px;color:#8896a7;">共 4 个模板</span></div>
|
||
<div class="card-body">
|
||
<div class="filter-tabs">
|
||
<span class="filter-tab active">全部 (4)</span>
|
||
<span class="filter-tab">皮瓣修复 (2)</span>
|
||
<span class="filter-tab">关节置换 (1)</span>
|
||
<span class="filter-tab">血管重建 (1)</span>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead><tr><th>模板名称</th><th>适用病种</th><th>阶段数</th><th>任务数</th><th>适用患者</th><th>状态</th><th>更新时间</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr class="clickable" onclick="showTplDetail()"><td style="font-weight:500;">皮瓣修复 - 标准康复方案</td><td><span class="tag tag-blue">皮瓣修复</span></td><td>6</td><td>42</td><td>58 人</td><td><span class="tag tag-green">已启用</span></td><td>2026-04-10</td><td><button class="btn btn-sm btn-primary" onclick="event.stopPropagation();showTplDetail()">查看</button> <button class="btn btn-sm btn-default" onclick="event.stopPropagation()">复制</button></td></tr>
|
||
<tr class="clickable"><td style="font-weight:500;">关节置换 - 标准康复方案</td><td><span class="tag tag-green">关节置换</span></td><td>5</td><td>38</td><td>38 人</td><td><span class="tag tag-green">已启用</span></td><td>2026-04-08</td><td><button class="btn btn-sm btn-primary">查看</button> <button class="btn btn-sm btn-default">复制</button></td></tr>
|
||
<tr class="clickable"><td style="font-weight:500;">血管重建 - 标准康复方案</td><td><span class="tag tag-purple">血管重建</span></td><td>4</td><td>30</td><td>32 人</td><td><span class="tag tag-green">已启用</span></td><td>2026-04-05</td><td><button class="btn btn-sm btn-primary">查看</button> <button class="btn btn-sm btn-default">复制</button></td></tr>
|
||
<tr class="clickable"><td style="font-weight:500;">皮瓣修复 - 老年患者方案</td><td><span class="tag tag-blue">皮瓣修复</span></td><td>6</td><td>45</td><td>—</td><td><span class="tag tag-gray">草稿</span></td><td>2026-04-12</td><td><button class="btn btn-sm btn-primary">查看</button> <button class="btn btn-sm btn-default">复制</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Detail View (hidden by default) -->
|
||
<div id="tpl-detail" style="display:none;">
|
||
<div class="page-header">
|
||
<div>
|
||
<div style="display:flex;align-items:center;gap:8px;"><span style="color:#1890ff;cursor:pointer;font-size:13px;" onclick="hideTplDetail()">← 返回模板列表</span></div>
|
||
<h1 style="margin-top:4px;">皮瓣修复 - 标准康复方案</h1>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="btn btn-default">复制模板</button>
|
||
<button class="btn btn-default">禁用</button>
|
||
<button class="btn btn-primary">编辑模板</button>
|
||
</div>
|
||
</div>
|
||
<div class="page-content">
|
||
<!-- Template Info -->
|
||
<div class="stats-row cols4">
|
||
<div class="stat-card"><div class="stat-label">适用病种</div><div style="font-size:16px;font-weight:600;color:#1890ff;margin-top:4px;">皮瓣修复</div><div class="stat-sub">A 游离皮瓣 · B 带蒂皮瓣</div></div>
|
||
<div class="stat-card"><div class="stat-label">康复阶段</div><div class="stat-value blue">6</div><div class="stat-sub">决策期 → 康复6个月</div></div>
|
||
<div class="stat-card"><div class="stat-label">任务总数</div><div class="stat-value green">42</div><div class="stat-sub">含定时提醒任务 18 项</div></div>
|
||
<div class="stat-card"><div class="stat-label">适用患者</div><div class="stat-value purple">58</div><div class="stat-sub">当前使用此模板</div></div>
|
||
</div>
|
||
<div class="alert alert-info" style="margin-bottom:20px;">此模板覆盖皮瓣修复患者从决策期到康复6个月的全旅程,每个阶段包含对应的任务清单、评估量表和知识推送内容。系统根据患者当前阶段自动匹配推送。</div>
|
||
<!-- Stage List -->
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>阶段配置</h3><span class="tag tag-blue">6 个阶段</span></div>
|
||
<div class="card-body" style="padding:0;">
|
||
<table class="data-table">
|
||
<thead><tr><th style="width:130px;">阶段</th><th>时间范围</th><th>任务数</th><th>评估量表</th><th>知识推送</th><th>提醒规则</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><span class="tag tag-orange">决策期</span></td><td>术前</td><td>5</td><td>焦虑评估(SAS)</td><td>手术知情、术前准备 (3篇)</td><td>入组后立即推送</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
<tr><td><span class="tag tag-blue">围术期</span></td><td>术前1-3天</td><td>8</td><td>营养评估(NRS2002)</td><td>术前检查、饮食指导 (4篇)</td><td>术前3天推送</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
<tr><td><span class="tag tag-purple">术后1-7天</span></td><td>术后第1-7天</td><td>10</td><td>疼痛VAS、皮瓣观察</td><td>皮瓣观察要点、体位指导 (5篇)</td><td>每日 08:00 / 20:00</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
<tr><td><span class="tag tag-cyan">术后8-14天</span></td><td>术后第8-14天</td><td>8</td><td>疼痛VAS、伤口评估</td><td>伤口护理、换药指南 (4篇)</td><td>每日 08:00 / 20:00</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
<tr><td><span class="tag tag-green">康复1-3月</span></td><td>术后1-3个月</td><td>7</td><td>功能评估、心理评估</td><td>康复锻炼、营养指导 (4篇)</td><td>每日 08:00</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
<tr><td><span class="tag tag-green">康复6个月</span></td><td>术后6个月</td><td>4</td><td>综合评估</td><td>长期护理、复查提醒 (3篇)</td><td>每周一 09:00</td><td><button class="btn btn-sm btn-primary" onclick="showModal('modal-stage-detail')">详情</button> <button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<!-- Preset Alert Rules -->
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>预警规则配置</h3></div>
|
||
<div class="card-body" style="padding:0;">
|
||
<table class="data-table">
|
||
<thead><tr><th>指标</th><th>预警条件</th><th>级别</th><th>处理建议</th><th>状态</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>皮瓣颜色</td><td>苍白 或 发紫</td><td><span class="tag tag-red">紧急</span></td><td>请抬高患肢,注意保暖,并联系医生</td><td><span class="tag tag-green">启用</span></td></tr>
|
||
<tr><td>毛细血管反应</td><td>减弱(>3秒)或 消失</td><td><span class="tag tag-red">紧急</span></td><td>立即联系主治医生评估血供</td><td><span class="tag tag-green">启用</span></td></tr>
|
||
<tr><td>疼痛评分</td><td>VAS ≥ 7</td><td><span class="tag tag-orange">警告</span></td><td>建议调整镇痛方案</td><td><span class="tag tag-green">启用</span></td></tr>
|
||
<tr><td>肿胀程度</td><td>重度</td><td><span class="tag tag-orange">警告</span></td><td>抬高患肢,冷敷,联系医生</td><td><span class="tag tag-green">启用</span></td></tr>
|
||
<tr><td>血糖</td><td>空腹 > 7.0 或 < 3.9</td><td><span class="tag tag-orange">警告</span></td><td>注意饮食控制,监测血糖变化</td><td><span class="tag tag-green">启用</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<!-- Usage Stats -->
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>使用统计</h3></div>
|
||
<div class="card-body">
|
||
<div class="chart-bar-group">
|
||
<div class="chart-bar-item"><span class="chart-bar-label">决策期</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:15%;background:#fa8c16;"></div></div><span class="chart-bar-val">9人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">围术期</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:12%;background:#1890ff;"></div></div><span class="chart-bar-val">7人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">术后1-7天</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:20%;background:#722ed1;"></div></div><span class="chart-bar-val">12人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">术后8-14天</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:17%;background:#006d75;"></div></div><span class="chart-bar-val">10人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">康复1-3月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:22%;background:#52c41a;"></div></div><span class="chart-bar-val">13人</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">康复6个月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:12%;background:#52c41a;"></div></div><span class="chart-bar-val">7人</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Consult Page ===== -->
|
||
<div id="page-consult" class="page">
|
||
<div class="page-header">
|
||
<div><h1>咨询管理</h1><div class="meta">患者图文咨询与在线回复</div></div>
|
||
</div>
|
||
<div class="page-content">
|
||
<div class="stats-row cols4">
|
||
<div class="stat-card"><div class="stat-label">待回复</div><div class="stat-value orange">3</div><div class="stat-sub">请尽快处理</div></div>
|
||
<div class="stat-card"><div class="stat-label">今日咨询</div><div class="stat-value blue">15</div><div class="stat-sub">较昨日 +2</div></div>
|
||
<div class="stat-card"><div class="stat-label">平均响应</div><div class="stat-value green">12min</div><div class="stat-sub">目标 ≤30min</div></div>
|
||
<div class="stat-card"><div class="stat-label">本周总量</div><div class="stat-value purple">68</div><div class="stat-sub">热点:伤口护理</div></div>
|
||
</div>
|
||
<div class="stats-row cols2">
|
||
<!-- Chat List -->
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>咨询列表</h3></div>
|
||
<div class="card-body" style="padding:0;">
|
||
<div style="padding:10px 14px;border-bottom:1px solid #f0f4f8;display:flex;align-items:center;gap:10px;cursor:pointer;background:#e6f7ff;">
|
||
<div class="chat-avatar patient">张</div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:500;">张** <span class="tag tag-red" style="margin-left:4px;">未回复</span></div><div style="font-size:11px;color:#8896a7;margin-top:2px;">伤口周围有点红肿,是正常的吗?</div></div>
|
||
<div style="font-size:10px;color:#8896a7;">09:45</div>
|
||
</div>
|
||
<div style="padding:10px 14px;border-bottom:1px solid #f0f4f8;display:flex;align-items:center;gap:10px;cursor:pointer;">
|
||
<div class="chat-avatar patient">李</div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:500;">李** <span class="tag tag-red" style="margin-left:4px;">未回复</span></div><div style="font-size:11px;color:#8896a7;margin-top:2px;">膝盖弯曲时疼痛加重怎么办?</div></div>
|
||
<div style="font-size:10px;color:#8896a7;">08:30</div>
|
||
</div>
|
||
<div style="padding:10px 14px;border-bottom:1px solid #f0f4f8;display:flex;align-items:center;gap:10px;cursor:pointer;">
|
||
<div class="chat-avatar patient">王</div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:500;">王** <span class="tag tag-red" style="margin-left:4px;">未回复</span></div><div style="font-size:11px;color:#8896a7;margin-top:2px;">血糖控制不太好,需要调药吗?</div></div>
|
||
<div style="font-size:10px;color:#8896a7;">昨天</div>
|
||
</div>
|
||
<div style="padding:10px 14px;border-bottom:1px solid #f0f4f8;display:flex;align-items:center;gap:10px;cursor:pointer;">
|
||
<div class="chat-avatar patient">赵</div>
|
||
<div style="flex:1;"><div style="font-size:13px;font-weight:500;">赵**</div><div style="font-size:11px;color:#8896a7;margin-top:2px;">好的,谢谢医生!</div></div>
|
||
<div style="font-size:10px;color:#8896a7;">昨天</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Chat Window -->
|
||
<div class="section-card">
|
||
<div class="chat-container" style="height:auto;border:none;">
|
||
<div class="chat-header">
|
||
<div><strong>张** · 皮瓣修复</strong> <span class="tag tag-cyan" style="margin-left:4px;">术后8-14天</span></div>
|
||
<button class="btn btn-sm btn-default">查看病历</button>
|
||
</div>
|
||
<div class="chat-body" style="min-height:260px;">
|
||
<div class="chat-msg">
|
||
<div class="chat-avatar patient">张</div>
|
||
<div><div class="chat-bubble">医生您好,我今天换药的时候发现伤口周围有点红肿,是正常的吗?</div><div class="chat-time">09:45</div></div>
|
||
</div>
|
||
<div class="chat-msg">
|
||
<div class="chat-avatar patient">张</div>
|
||
<div><div class="chat-bubble">我拍了张照片,您帮我看看 [图片]</div><div class="chat-time">09:46</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-footer">
|
||
<input type="text" placeholder="输入回复内容..." style="border-radius:20px;">
|
||
<button class="btn btn-primary" style="border-radius:20px;">发送</button>
|
||
</div>
|
||
<div style="padding:8px 16px;background:#f8fafc;border-top:1px solid #f0f4f8;">
|
||
<span style="font-size:11px;color:#8896a7;">快捷回复:</span>
|
||
<button class="btn btn-sm btn-default" style="margin:2px;">术后轻微红肿属正常现象</button>
|
||
<button class="btn btn-sm btn-default" style="margin:2px;">建议来院复查</button>
|
||
<button class="btn btn-sm btn-default" style="margin:2px;">注意保持伤口清洁干燥</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Reports Page ===== -->
|
||
<div id="page-reports" class="page">
|
||
<div class="page-header">
|
||
<div><h1>数据报表</h1><div class="meta">科研数据统计与匿名化导出</div></div>
|
||
<div class="header-actions">
|
||
<button class="btn btn-default">导出 Excel</button>
|
||
<button class="btn btn-default">导出 PDF</button>
|
||
</div>
|
||
</div>
|
||
<div class="page-content">
|
||
<div class="alert alert-info" style="margin-bottom:20px;">
|
||
数据导出已严格脱敏处理,去除姓名、手机号等个人身份信息,仅保留匿名化编号。
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>筛选条件</h3></div>
|
||
<div class="card-body">
|
||
<div class="form-grid">
|
||
<div class="form-group"><label>时间范围</label><select><option>最近30天</option><option>最近90天</option><option>最近半年</option><option>自定义</option></select></div>
|
||
<div class="form-group"><label>手术类型</label><select><option>全部</option><option>皮瓣修复</option><option>关节置换</option><option>血管重建</option></select></div>
|
||
<div class="form-group"><label>康复阶段</label><select><option>全部</option><option>决策期</option><option>围术期</option><option>术后1-7天</option><option>术后8-14天</option><option>康复1-3月</option><option>康复6个月</option></select></div>
|
||
<div class="form-group"><label>数据类型</label><select><option>全部</option><option>量表评分</option><option>关键指标</option><option>任务打卡</option><option>咨询记录</option></select></div>
|
||
<div class="form-group"><label>年龄范围</label><div style="display:flex;gap:8px;"><input type="number" placeholder="最小" style="width:50%;"><input type="number" placeholder="最大" style="width:50%;"></div></div>
|
||
<div class="form-group" style="align-self:end;"><button class="btn btn-primary" style="width:100%;">查询</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stats-row cols4">
|
||
<div class="stat-card"><div class="stat-label">匹配患者</div><div class="stat-value blue">128</div><div class="stat-sub">符合筛选条件</div></div>
|
||
<div class="stat-card"><div class="stat-label">评估记录</div><div class="stat-value green">1,247</div><div class="stat-sub">含量表 + 指标</div></div>
|
||
<div class="stat-card"><div class="stat-label">打卡记录</div><div class="stat-value purple">8,432</div><div class="stat-sub">平均打卡率 84%</div></div>
|
||
<div class="stat-card"><div class="stat-label">咨询记录</div><div class="stat-value orange">356</div><div class="stat-sub">热点:伤口护理</div></div>
|
||
</div>
|
||
<div class="stats-row cols2">
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>FJS 评分趋势</h3><span class="tag tag-green">关节置换</span></div>
|
||
<div class="card-body">
|
||
<div class="chart-bar-group">
|
||
<div class="chart-bar-item"><span class="chart-bar-label">术后1月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:45%;background:#fa8c16;"></div></div><span class="chart-bar-val">45分</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">术后2月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:62%;background:#1890ff;"></div></div><span class="chart-bar-val">62分</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">术后3月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:72%;background:#52c41a;"></div></div><span class="chart-bar-val">72分</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">术后6月</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:85%;background:#52c41a;"></div></div><span class="chart-bar-val">85分</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>预警频次统计</h3><span class="tag tag-red">异常分布</span></div>
|
||
<div class="card-body">
|
||
<div class="chart-bar-group">
|
||
<div class="chart-bar-item"><span class="chart-bar-label">皮瓣异常</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:40%;background:#ff4d4f;"></div></div><span class="chart-bar-val">32次</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">疼痛超标</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:30%;background:#fa8c16;"></div></div><span class="chart-bar-val">24次</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">血糖异常</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:18%;background:#722ed1;"></div></div><span class="chart-bar-val">14次</span></div>
|
||
<div class="chart-bar-item"><span class="chart-bar-label">伤口异常</span><div class="chart-bar-track"><div class="chart-bar-fill" style="width:12%;background:#1890ff;"></div></div><span class="chart-bar-val">10次</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Settings Page ===== -->
|
||
<div id="page-settings" class="page">
|
||
<div class="page-header">
|
||
<div><h1>系统设置</h1><div class="meta">系统配置与权限管理</div></div>
|
||
</div>
|
||
<div class="page-content">
|
||
<div class="stats-row cols2">
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>基础设置</h3></div>
|
||
<div class="card-body">
|
||
<div class="settings-section">
|
||
<h4>预警规则</h4>
|
||
<div class="settings-item"><div><label>皮瓣颜色异常预警</label><div class="desc">苍白或发紫时触发紧急预警</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
|
||
<div class="settings-item"><div><label>疼痛评分阈值</label><div class="desc">VAS ≥ 7 分触发预警</div></div><input type="number" value="7" style="width:60px;text-align:center;"></div>
|
||
<div class="settings-item"><div><label>血糖异常阈值</label><div class="desc">空腹 > 7.0 或 < 3.9 mmol/L</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
|
||
<div class="settings-item"><div><label>打卡提醒</label><div class="desc">每日定时推送打卡提醒</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
|
||
</div>
|
||
<div class="settings-section">
|
||
<h4>通知设置</h4>
|
||
<div class="settings-item"><div><label>微信服务通知</label><div class="desc">通过微信推送预警和提醒</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
|
||
<div class="settings-item"><div><label>短信预警通知</label><div class="desc">紧急预警时发送短信(如皮瓣危象)</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="card-header"><h3>用户管理</h3><button class="btn btn-sm btn-primary">+ 新增用户</button></div>
|
||
<div class="card-body" style="padding:0;">
|
||
<table class="data-table">
|
||
<thead><tr><th>姓名</th><th>角色</th><th>科室</th><th>状态</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>陈主任</td><td><span class="tag tag-purple">管理员</span></td><td>护理部</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
<tr><td>王护士</td><td><span class="tag tag-blue">医护人员</span></td><td>骨科病区</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
<tr><td>李医生</td><td><span class="tag tag-blue">医护人员</span></td><td>显微外科</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
<tr><td>赵护士</td><td><span class="tag tag-blue">医护人员</span></td><td>血管外科</td><td><span class="tag tag-gray">禁用</span></td><td><button class="btn btn-sm btn-default">编辑</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Modals ===== -->
|
||
<!-- New Patient Modal -->
|
||
<div class="modal-overlay" id="modal-new-patient">
|
||
<div class="modal">
|
||
<div class="modal-header"><h3>新增患者</h3><button class="modal-close" onclick="hideModal('modal-new-patient')">×</button></div>
|
||
<div class="modal-body">
|
||
<div class="form-grid">
|
||
<div class="form-group"><label><span class="req">*</span> 患者姓名</label><input type="text" placeholder="请输入"></div>
|
||
<div class="form-group"><label><span class="req">*</span> 性别</label><select><option>请选择</option><option>男</option><option>女</option></select></div>
|
||
<div class="form-group"><label><span class="req">*</span> 年龄</label><input type="number" placeholder="请输入"></div>
|
||
<div class="form-group"><label><span class="req">*</span> 手机号</label><input type="text" placeholder="请输入"></div>
|
||
<div class="form-group"><label><span class="req">*</span> 所在地区</label><input type="text" placeholder="省/市"></div>
|
||
<div class="form-group"><label><span class="req">*</span> 手术类型</label><select><option>请选择</option><option>皮瓣修复</option><option>关节置换</option><option>血管重建</option></select></div>
|
||
<div class="form-group"><label><span class="req">*</span> 手术时间</label><input type="date"></div>
|
||
<div class="form-group"><label><span class="req">*</span> 手术医生</label><input type="text" placeholder="请输入"></div>
|
||
<div class="form-group"><label><span class="req">*</span> 当前阶段</label><select><option>请选择</option><option>决策期</option><option>围术期</option><option>术后1-7天</option><option>术后8-14天</option><option>康复1-3月</option><option>康复6个月</option></select></div>
|
||
<div class="form-group"><label>受教育程度</label><select><option>请选择</option><option>小学及以下</option><option>初中</option><option>高中/中专</option><option>大专</option><option>本科及以上</option></select></div>
|
||
<div class="form-group"><label>慢性病</label><input type="text" placeholder="如:高血压、糖尿病"></div>
|
||
<div class="form-group"><label>用药情况</label><input type="text" placeholder="请输入"></div>
|
||
<div class="form-group"><label>家庭照顾者</label><input type="text" placeholder="请输入"></div>
|
||
<div class="form-group"><label>照顾者学历</label><select><option>请选择</option><option>小学及以下</option><option>初中</option><option>高中/中专</option><option>大专</option><option>本科及以上</option></select></div>
|
||
<div class="form-group"><label>家庭年收入</label><select><option>请选择</option><option>5万以下</option><option>5-10万</option><option>10-20万</option><option>20万以上</option></select></div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-default" onclick="hideModal('modal-new-patient')">取消</button>
|
||
<button class="btn btn-primary" onclick="hideModal('modal-new-patient');showToast('患者添加成功')">确认添加</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- New Article Modal -->
|
||
<div class="modal-overlay" id="modal-new-article">
|
||
<div class="modal" style="width:680px;">
|
||
<div class="modal-header"><h3>新增知识内容</h3><button class="modal-close" onclick="hideModal('modal-new-article')">×</button></div>
|
||
<div class="modal-body">
|
||
<div class="alert alert-info" style="margin-bottom:16px;">请将专业医学内容转化为通俗易懂的患者版本。系统将根据病种分类和适用阶段自动匹配推送给对应患者。</div>
|
||
<div class="form-grid">
|
||
<div class="form-group span2"><label><span class="req">*</span> 标题</label><input type="text" placeholder="请输入内容标题,建议包含病种和阶段关键词"></div>
|
||
<div class="form-group"><label><span class="req">*</span> 内容类型</label><select><option>图文</option><option>视频</option></select></div>
|
||
<div class="form-group span3"><label><span class="req">*</span> 病种分类(可多选)</label>
|
||
<div style="display:flex;gap:6px;flex-wrap:wrap;">
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> A 游离皮瓣</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> B 带蒂皮瓣</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> C 膝关节</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> D 髋关节</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> E 血管吻合</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> F-G 其他血管</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> H 神经修复</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> I 骨缺损</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> J 通用</label>
|
||
</div></div>
|
||
<div class="form-group span3"><label><span class="req">*</span> 适用阶段(可多选)</label>
|
||
<div style="display:flex;gap:6px;flex-wrap:wrap;">
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 决策期</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 围术期</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 术后1-7天</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 术后8-14天</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 康复1-3月</label>
|
||
<label style="display:flex;align-items:center;gap:3px;font-size:12px;cursor:pointer;padding:4px 8px;border:1px solid #d0d7de;border-radius:4px;"><input type="checkbox" style="width:auto;"> 康复6个月</label>
|
||
</div></div>
|
||
<div class="form-group span2"><label>关键词标签</label><input type="text" placeholder="多个关键词用逗号分隔,如:疼痛、营养、心理、锻炼"></div>
|
||
<div class="form-group"><label>来源文档</label><div style="border:1px dashed #d0d7de;border-radius:6px;padding:10px;text-align:center;font-size:12px;color:#8896a7;cursor:pointer;">点击上传 Word/PDF</div></div>
|
||
<div class="form-group span3"><label><span class="req">*</span> 内容摘要</label><textarea placeholder="请输入面向患者的通俗化内容摘要..."></textarea></div>
|
||
<div class="form-group span3"><label><span class="req">*</span> 正文内容</label><textarea style="min-height:120px;" placeholder="请输入通俗易懂的正文内容。注意:将专业术语转化为患者能理解的语言..."></textarea></div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-default" onclick="hideModal('modal-new-article')">取消</button>
|
||
<button class="btn btn-default" onclick="hideModal('modal-new-article');showToast('已保存为草稿')">保存草稿</button>
|
||
<button class="btn btn-primary" onclick="hideModal('modal-new-article');showToast('内容已提交审核')">提交审核</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- New Template Modal -->
|
||
<div class="modal-overlay" id="modal-new-template">
|
||
<div class="modal">
|
||
<div class="modal-header"><h3>新建康复模板</h3><button class="modal-close" onclick="hideModal('modal-new-template')">×</button></div>
|
||
<div class="modal-body">
|
||
<div class="form-grid">
|
||
<div class="form-group span2"><label><span class="req">*</span> 模板名称</label><input type="text" placeholder="如:皮瓣修复 - 标准康复方案"></div>
|
||
<div class="form-group"><label><span class="req">*</span> 适用病种</label><select><option>请选择</option><option>皮瓣修复</option><option>关节置换</option><option>血管重建</option></select></div>
|
||
<div class="form-group span3"><label>模板说明</label><textarea placeholder="请描述此模板的适用场景和特点..."></textarea></div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-default" onclick="hideModal('modal-new-template')">取消</button>
|
||
<button class="btn btn-primary" onclick="hideModal('modal-new-template');showToast('模板创建成功')">确认创建</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage Detail Modal -->
|
||
<div class="modal-overlay" id="modal-stage-detail">
|
||
<div class="modal" style="width:700px;">
|
||
<div class="modal-header"><h3>阶段详情 — 决策期</h3><button class="modal-close" onclick="hideModal('modal-stage-detail')">×</button></div>
|
||
<div class="modal-body">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px;">
|
||
<div class="stat-card" style="padding:12px;"><div class="stat-label">时间范围</div><div style="font-size:14px;font-weight:600;">术前</div></div>
|
||
<div class="stat-card" style="padding:12px;"><div class="stat-label">任务数</div><div style="font-size:14px;font-weight:600;color:#1890ff;">5 项</div></div>
|
||
<div class="stat-card" style="padding:12px;"><div class="stat-label">当前患者</div><div style="font-size:14px;font-weight:600;color:#722ed1;">9 人</div></div>
|
||
</div>
|
||
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">任务清单</h4>
|
||
<table class="data-table" style="font-size:12px;margin-bottom:16px;">
|
||
<thead><tr><th>序号</th><th>任务名称</th><th>类型</th><th>提醒时间</th><th>是否必做</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>阅读手术知情同意书</td><td><span class="tag tag-blue">阅读</span></td><td>入组当天</td><td><span class="tag tag-green">必做</span></td></tr>
|
||
<tr><td>2</td><td>完成焦虑自评量表(SAS)</td><td><span class="tag tag-orange">评估</span></td><td>入组当天</td><td><span class="tag tag-green">必做</span></td></tr>
|
||
<tr><td>3</td><td>了解术前准备事项</td><td><span class="tag tag-blue">阅读</span></td><td>入组当天</td><td><span class="tag tag-green">必做</span></td></tr>
|
||
<tr><td>4</td><td>记录当前疼痛基线</td><td><span class="tag tag-purple">记录</span></td><td>入组当天</td><td><span class="tag tag-green">必做</span></td></tr>
|
||
<tr><td>5</td><td>观看手术流程科普视频</td><td><span class="tag tag-purple">视频</span></td><td>入组次日</td><td><span class="tag tag-gray">选做</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">评估量表</h4>
|
||
<div style="display:flex;gap:8px;margin-bottom:16px;">
|
||
<div style="border:1px solid #e8edf2;border-radius:8px;padding:12px;flex:1;">
|
||
<div style="font-size:13px;font-weight:500;">焦虑自评量表(SAS)</div>
|
||
<div style="font-size:11px;color:#8896a7;margin-top:4px;">20题 · 约5分钟 · 评估术前焦虑水平</div>
|
||
<div style="margin-top:6px;"><span class="tag tag-green">必填</span></div>
|
||
</div>
|
||
</div>
|
||
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">知识推送内容</h4>
|
||
<table class="data-table" style="font-size:12px;">
|
||
<thead><tr><th>内容</th><th>类型</th><th>推送时机</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>皮瓣修复手术简介 — 您需要了解的事</td><td><span class="tag tag-blue">图文</span></td><td>入组当天</td></tr>
|
||
<tr><td>术前准备清单 — 饮食、用药、心理</td><td><span class="tag tag-blue">图文</span></td><td>入组当天</td></tr>
|
||
<tr><td>手术流程科普动画</td><td><span class="tag tag-purple">视频</span></td><td>入组次日</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-default" onclick="hideModal('modal-stage-detail')">关闭</button>
|
||
<button class="btn btn-primary">编辑阶段</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Patient Detail Modal -->
|
||
<div class="modal-overlay" id="modal-patient-detail">
|
||
<div class="modal" style="width:720px;">
|
||
<div class="modal-header"><h3>患者详情 — 张** (P20260301)</h3><button class="modal-close" onclick="hideModal('modal-patient-detail')">×</button></div>
|
||
<div class="modal-body">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px;">
|
||
<div class="stat-card" style="padding:12px;"><div class="stat-label">手术类型</div><div style="font-size:14px;font-weight:600;color:#1890ff;">皮瓣修复</div></div>
|
||
<div class="stat-card" style="padding:12px;"><div class="stat-label">康复阶段</div><div style="font-size:14px;font-weight:600;color:#722ed1;">术后8-14天</div></div>
|
||
<div class="stat-card" style="padding:12px;"><div class="stat-label">打卡率</div><div style="font-size:14px;font-weight:600;color:#52c41a;">92%</div></div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
|
||
<div>
|
||
<h4 style="font-size:13px;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">基本信息</h4>
|
||
<div class="detail-grid">
|
||
<div class="detail-item"><label>姓名</label><span>张**</span></div>
|
||
<div class="detail-item"><label>性别/年龄</label><span>男 / 52岁</span></div>
|
||
<div class="detail-item"><label>所在地区</label><span>浙江省杭州市</span></div>
|
||
<div class="detail-item"><label>手术时间</label><span>2026-04-06</span></div>
|
||
<div class="detail-item"><label>手术医生</label><span>李主任</span></div>
|
||
<div class="detail-item"><label>慢性病</label><span>高血压</span></div>
|
||
<div class="detail-item"><label>用药</label><span>降压药(每日1次)</span></div>
|
||
<div class="detail-item"><label>照顾者</label><span>配偶</span></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size:13px;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">最近健康指标</h4>
|
||
<table class="data-table" style="font-size:12px;">
|
||
<tr><td style="color:#8896a7;">皮瓣颜色</td><td><span class="tag tag-green">红润</span></td><td style="color:#8896a7;">今天 08:00</td></tr>
|
||
<tr><td style="color:#8896a7;">肿胀程度</td><td>轻度</td><td style="color:#8896a7;">今天 08:00</td></tr>
|
||
<tr><td style="color:#8896a7;">疼痛评分</td><td>VAS 4/10</td><td style="color:#8896a7;">昨天 20:00</td></tr>
|
||
<tr><td style="color:#8896a7;">血糖</td><td>5.8 mmol/L</td><td style="color:#8896a7;">昨天 07:30</td></tr>
|
||
<tr><td style="color:#8896a7;">毛细血管反应</td><td>正常</td><td style="color:#8896a7;">今天 08:00</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<h4 style="font-size:13px;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">预警记录</h4>
|
||
<table class="data-table" style="font-size:12px;">
|
||
<thead><tr><th>时间</th><th>类型</th><th>详情</th><th>状态</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>04-16 09:32</td><td><span class="tag tag-red">皮瓣异常</span></td><td>皮瓣颜色苍白,毛细血管反应减弱</td><td><span class="tag tag-orange">待处理</span></td></tr>
|
||
<tr><td>04-14 15:20</td><td><span class="tag tag-orange">疼痛</span></td><td>VAS 7/10,超出阈值</td><td><span class="tag tag-green">已处理</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<h4 style="font-size:13px;font-weight:600;margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid #f0f4f8;">任务完成情况(最近7天)</h4>
|
||
<div style="display:flex;gap:6px;align-items:flex-end;height:60px;">
|
||
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:50px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/10</div></div>
|
||
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:45px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/11</div></div>
|
||
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:55px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/12</div></div>
|
||
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:50px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/13</div></div>
|
||
<div style="flex:1;text-align:center;"><div style="background:#fa8c16;height:40px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/14</div></div>
|
||
<div style="flex:1;text-align:center;"><div style="background:#52c41a;height:55px;border-radius:3px 3px 0 0;"></div><div style="font-size:10px;color:#8896a7;margin-top:4px;">4/15</div></div>
|
||
<div style="flex:1;text-align:center;"><div style="background:#1890ff;height:35px;border-radius:3px 3px 0 0;border:2px solid #096dd9;"></div><div style="font-size:10px;color:#1890ff;margin-top:4px;">今天</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-default" onclick="hideModal('modal-patient-detail')">关闭</button>
|
||
<button class="btn btn-primary">推送康复指导</button>
|
||
<button class="btn btn-purple">发送消息</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Assessment Detail Modal -->
|
||
<div class="modal-overlay" id="modal-assess-detail">
|
||
<div class="modal" style="width:640px;">
|
||
<div class="modal-header"><h3>评估详情</h3><button class="modal-close" onclick="hideModal('modal-assess-detail')">×</button></div>
|
||
<div class="modal-body">
|
||
<div class="alert alert-info" style="margin-bottom:16px;">皮瓣观察记录 — 张** · 2026-04-16 10:20</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
|
||
<div>
|
||
<div class="detail-grid">
|
||
<div class="detail-item"><label>患者</label><span>张** (P20260301)</span></div>
|
||
<div class="detail-item"><label>手术类型</label><span>皮瓣修复</span></div>
|
||
<div class="detail-item"><label>康复阶段</label><span>术后8-14天</span></div>
|
||
<div class="detail-item"><label>记录时间</label><span>2026-04-16 10:20</span></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="detail-grid">
|
||
<div class="detail-item"><label>皮瓣颜色</label><span style="color:#ff4d4f;font-weight:600;">苍白</span></div>
|
||
<div class="detail-item"><label>肿胀程度</label><span style="color:#fa8c16;">中度</span></div>
|
||
<div class="detail-item"><label>毛细血管反应</label><span style="color:#ff4d4f;font-weight:600;">减弱</span></div>
|
||
<div class="detail-item"><label>是否异常</label><span><span class="tag tag-red">异常</span></span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;">患者描述</h4>
|
||
<div style="background:#f8fafc;border-radius:6px;padding:12px;font-size:13px;color:#4a5568;line-height:1.6;margin-bottom:16px;">
|
||
今天早上观察发现皮瓣颜色比昨天偏白,按压后恢复时间变长,大约3-4秒。肿胀比昨天稍有加重。
|
||
</div>
|
||
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;">患者上传照片</h4>
|
||
<div style="display:flex;gap:8px;margin-bottom:16px;">
|
||
<div style="width:100px;height:100px;background:#f0f4f8;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8896a7;font-size:11px;border:1px solid #e8edf2;">伤口照片1</div>
|
||
<div style="width:100px;height:100px;background:#f0f4f8;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8896a7;font-size:11px;border:1px solid #e8edf2;">伤口照片2</div>
|
||
</div>
|
||
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;">系统预警</h4>
|
||
<div class="alert alert-warning">皮瓣颜色苍白 + 毛细血管反应减弱,建议:请抬高患肢,注意保暖,并联系医生评估血供情况。</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-default" onclick="hideModal('modal-assess-detail')">关闭</button>
|
||
<button class="btn btn-primary">联系患者</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alert Handle Modal -->
|
||
<div class="modal-overlay" id="modal-alert-handle">
|
||
<div class="modal" style="width:600px;">
|
||
<div class="modal-header"><h3>处理预警</h3><button class="modal-close" onclick="hideModal('modal-alert-handle')">×</button></div>
|
||
<div class="modal-body">
|
||
<div class="alert alert-warning" style="margin-bottom:16px;">
|
||
<strong>预警信息:</strong>张** — 皮瓣颜色苍白,毛细血管反应减弱 (2026-04-16 09:32)
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
|
||
<div class="detail-item"><label>患者</label><span>张** (P20260301)</span></div>
|
||
<div class="detail-item"><label>手术类型</label><span>皮瓣修复</span></div>
|
||
<div class="detail-item"><label>预警级别</label><span><span class="tag tag-red">紧急</span></span></div>
|
||
<div class="detail-item"><label>预警时间</label><span>2026-04-16 09:32</span></div>
|
||
</div>
|
||
<div class="form-grid" style="grid-template-columns:1fr;">
|
||
<div class="form-group"><label><span class="req">*</span> 处理措施</label>
|
||
<select><option>请选择处理措施</option><option>电话指导患者</option><option>推送护理建议</option><option>安排来院复查</option><option>紧急联系主治医生</option><option>其他</option></select>
|
||
</div>
|
||
<div class="form-group"><label><span class="req">*</span> 处理说明</label>
|
||
<textarea placeholder="请详细描述处理过程和建议...">已电话联系患者,指导其抬高患肢、注意保暖。嘱咐患者持续观察,如30分钟内颜色未恢复红润,立即来院就诊。</textarea>
|
||
</div>
|
||
<div class="form-group"><label>是否需要随访</label>
|
||
<div style="display:flex;gap:12px;"><label style="display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;"><input type="radio" name="followup" checked style="width:auto;"> 是,2小时后随访</label><label style="display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;"><input type="radio" name="followup" style="width:auto;"> 否</label></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-default" onclick="hideModal('modal-alert-handle')">取消</button>
|
||
<button class="btn btn-success" onclick="hideModal('modal-alert-handle');showToast('预警已处理')">确认处理</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast -->
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<script>
|
||
function navTo(page, el) {
|
||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||
document.getElementById('page-' + page).classList.add('active');
|
||
if (el) el.classList.add('active');
|
||
}
|
||
function showModal(id) {
|
||
document.getElementById(id).classList.add('show');
|
||
}
|
||
function hideModal(id) {
|
||
document.getElementById(id).classList.remove('show');
|
||
}
|
||
function showToast(msg) {
|
||
var t = document.getElementById('toast');
|
||
t.textContent = '✓ ' + msg;
|
||
t.classList.add('show');
|
||
setTimeout(function(){ t.classList.remove('show'); }, 2800);
|
||
}
|
||
function showTplDetail() {
|
||
document.getElementById('tpl-list').style.display = 'none';
|
||
document.getElementById('tpl-detail').style.display = 'block';
|
||
}
|
||
function hideTplDetail() {
|
||
document.getElementById('tpl-detail').style.display = 'none';
|
||
document.getElementById('tpl-list').style.display = 'block';
|
||
}
|
||
function showKbDetail() {
|
||
document.getElementById('kb-list').style.display = 'none';
|
||
document.getElementById('kb-detail').style.display = 'block';
|
||
}
|
||
function hideKbDetail() {
|
||
document.getElementById('kb-detail').style.display = 'none';
|
||
document.getElementById('kb-list').style.display = 'block';
|
||
}
|
||
// Close modal on overlay click
|
||
document.querySelectorAll('.modal-overlay').forEach(function(o) {
|
||
o.addEventListener('click', function(e) {
|
||
if (e.target === o) o.classList.remove('show');
|
||
});
|
||
});
|
||
// Filter tab click
|
||
document.querySelectorAll('.filter-tabs').forEach(function(tabs) {
|
||
tabs.querySelectorAll('.filter-tab').forEach(function(tab) {
|
||
tab.addEventListener('click', function() {
|
||
tabs.querySelectorAll('.filter-tab').forEach(function(t){ t.classList.remove('active'); });
|
||
tab.classList.add('active');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|