Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 liuyunqin
|
dca337ffda | ||
 liuyunqinandClaude Opus 4.6
|
e420e6bca2 |
@@ -123,7 +123,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
*/
|
||||
function initTabLinks() {
|
||||
var role = sessionStorage.getItem('appRole') || 'expert';
|
||||
var base = role === 'assistant' ? '../assistant' : '../expert';
|
||||
var roleBaseMap = {
|
||||
expert: '../expert',
|
||||
assistant: '../assistant',
|
||||
professional: '../professional',
|
||||
operator: '../operator',
|
||||
onsite: '../onsite'
|
||||
};
|
||||
var base = roleBaseMap[role] || '../expert';
|
||||
document.getElementById('link-workbench').href = base + '/workbench/index.html';
|
||||
document.getElementById('link-knowledge').href = base + '/knowledge/index.html';
|
||||
document.getElementById('link-profile').href = base + '/profile/index.html';
|
||||
|
||||
@@ -255,11 +255,18 @@
|
||||
<script>
|
||||
/**
|
||||
* 根据sessionStorage中的角色标记，动态设置底部Tab的跳转路径
|
||||
* 各角色页面会写入对应的 appRole 值（expert / assistant）
|
||||
* 各角色页面会写入对应的 appRole 值（expert / assistant / professional）
|
||||
*/
|
||||
function initTabLinks() {
|
||||
var role = sessionStorage.getItem('appRole') || 'expert';
|
||||
var base = role === 'assistant' ? '../assistant' : '../expert';
|
||||
var roleBaseMap = {
|
||||
expert: '../expert',
|
||||
assistant: '../assistant',
|
||||
professional: '../professional',
|
||||
operator: '../operator',
|
||||
onsite: '../onsite'
|
||||
};
|
||||
var base = roleBaseMap[role] || '../expert';
|
||||
document.getElementById('link-workbench').href = base + '/workbench/index.html';
|
||||
document.getElementById('link-knowledge').href = base + '/knowledge/index.html';
|
||||
document.getElementById('link-profile').href = base + '/profile/index.html';
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="window.location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title" id="kd-nav-title">知识详情</span>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div id="kd-content" style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);"></div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var KB_DATA = {
|
||||
'blood-routine': {
|
||||
icon: '🩺', bg: '#e6f4ff', title: '血常规检查解读指南', cat: '体检知识', date: '2026-03-15',
|
||||
summary: '血常规是最基本的血液检验，通过检测血液中各种细胞成分的数量和形态，帮助医生了解患者的基本健康状况，是临床诊断的重要依据之一。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '白细胞计数（WBC）', desc: '正常范围：4.0-10.0 × 10⁹/L。升高提示感染、炎症或白血病；降低见于病毒感染、药物影响或免疫抑制。' },
|
||||
{ color: '#52c41a', name: '红细胞计数（RBC）', desc: '男性正常范围：4.5-5.5 × 10¹²/L；女性：3.8-5.1 × 10¹²/L。降低提示贫血，升高见于脱水或红细胞增多症。' },
|
||||
{ color: '#fa8c16', name: '血小板计数（PLT）', desc: '正常范围：100-300 × 10⁹/L。降低有出血风险，升高见于炎症或血小板增多症。' }
|
||||
]
|
||||
},
|
||||
'ecg': {
|
||||
icon: '❤️', bg: '#f6ffed', title: '心电图异常结果说明', cat: '体检知识', date: '2026-03-10',
|
||||
summary: '心电图（ECG）是记录心脏电活动的无创检查，常见异常结果需结合临床症状综合判断，不可单凭报告结论下诊断。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: 'ST段改变', desc: 'ST段压低≥0.1mV提示心肌缺血；ST段抬高需警惕急性心肌梗死，需立即就医。' },
|
||||
{ color: '#fa8c16', name: '心律失常', desc: '包括窦性心动过速（>100次/分）、窦性心动过缓（<60次/分）、房颤等，需结合症状评估。' },
|
||||
{ color: '#1677ff', name: '束支传导阻滞', desc: '完全性左束支传导阻滞常提示器质性心脏病；右束支传导阻滞可见于正常人，需随访观察。' }
|
||||
]
|
||||
},
|
||||
'liver': {
|
||||
icon: '🔬', bg: '#fff7e6', title: '肝功能指标详解', cat: '体检知识', date: '2026-03-12',
|
||||
summary: '肝功能检查通过检测血液中多种酶和蛋白质水平，评估肝脏的合成、代谢和排泄功能，是发现肝脏疾病的重要手段。',
|
||||
items: [
|
||||
{ color: '#fa8c16', name: '谷丙转氨酶（ALT）', desc: '正常值：男≤50 U/L，女≤40 U/L。升高提示肝细胞损伤，见于病毒性肝炎、脂肪肝、药物性肝损伤等。' },
|
||||
{ color: '#52c41a', name: '谷草转氨酶（AST）', desc: '正常值：≤40 U/L。AST/ALT比值>2提示酒精性肝病；单纯升高也见于心肌损伤。' },
|
||||
{ color: '#1677ff', name: '总胆红素（TBIL）', desc: '正常值：3.4-17.1 μmol/L。升高引起黄疸，需区分溶血性、肝细胞性和梗阻性黄疸。' }
|
||||
]
|
||||
},
|
||||
'glucose': {
|
||||
icon: '💉', bg: '#fff1f0', title: '血糖检测与糖尿病筛查', cat: '体检知识', date: '2026-03-08',
|
||||
summary: '血糖检测是糖尿病筛查和管理的核心手段，包括空腹血糖、餐后2小时血糖和糖化血红蛋白三项主要指标。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '空腹血糖（FPG）', desc: '正常：<6.1 mmol/L；糖尿病前期：6.1-7.0 mmol/L；糖尿病诊断标准：≥7.0 mmol/L（需两次确认）。' },
|
||||
{ color: '#fa8c16', name: '餐后2小时血糖', desc: '正常：<7.8 mmol/L；糖耐量受损：7.8-11.1 mmol/L；≥11.1 mmol/L结合症状可诊断糖尿病。' },
|
||||
{ color: '#722ed1', name: '糖化血红蛋白（HbA1c）', desc: '反映近2-3个月平均血糖水平。正常<5.7%；5.7-6.4%为糖尿病前期；≥6.5%可诊断糖尿病。' }
|
||||
]
|
||||
},
|
||||
'antihypertensive': {
|
||||
icon: '💊', bg: '#e6f4ff', title: '常用降压药物对比', cat: '药品知识', date: '2026-02-20',
|
||||
summary: '降压药物分为五大类，各有适应症和禁忌症，临床选药需结合患者合并症、年龄、肾功能等综合考量。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: 'ACEI/ARB类', desc: '代表药：依那普利、缬沙坦。适用于合并糖尿病、蛋白尿、心衰患者。禁用于妊娠、双侧肾动脉狭窄。' },
|
||||
{ color: '#52c41a', name: '钙通道阻滞剂（CCB）', desc: '代表药：氨氯地平、硝苯地平。适用于老年、单纯收缩期高血压。不良反应：踝部水肿、头痛。' },
|
||||
{ color: '#fa8c16', name: '利尿剂', desc: '代表药：氢氯噻嗪、螺内酯。适用于容量负荷过重、心衰患者。注意监测血钾、血糖、血尿酸。' }
|
||||
]
|
||||
},
|
||||
'statin': {
|
||||
icon: '🧪', bg: '#f6ffed', title: '他汀类药物使用指南', cat: '药品知识', date: '2026-02-15',
|
||||
summary: '他汀类药物是目前最有效的调脂药物，通过抑制HMG-CoA还原酶降低LDL-C，同时具有抗炎、稳定斑块等多效性作用。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '适应症与目标值', desc: '适用于LDL-C升高、动脉粥样硬化性心血管病（ASCVD）患者。高危患者LDL-C目标<1.8 mmol/L。' },
|
||||
{ color: '#fa8c16', name: '常用药物与剂量', desc: '阿托伐他汀10-80mg/日；瑞舒伐他汀5-40mg/日；辛伐他汀20-40mg/日（晚间服用效果更佳）。' },
|
||||
{ color: '#ff4d4f', name: '副作用监测', desc: '肌肉疼痛（肌病）：监测CK；肝功能损害：用药前及用药后4-8周复查ALT/AST；血糖轻度升高。' }
|
||||
]
|
||||
},
|
||||
'hypertension': {
|
||||
icon: '🫀', bg: '#fff7e6', title: '高血压诊断与管理', cat: '疾病知识', date: '2026-03-01',
|
||||
summary: '高血压是最常见的慢性病之一，长期控制不佳可导致心、脑、肾等靶器官损害。规范管理可显著降低心脑血管事件风险。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '诊断标准与分级', desc: '1级：140-159/90-99 mmHg；2级：160-179/100-109 mmHg；3级：≥180/110 mmHg。非同日3次测量均达标方可诊断。' },
|
||||
{ color: '#fa8c16', name: '生活方式干预', desc: '减重（BMI<24）、低盐饮食（<6g/日）、戒烟限酒、规律有氧运动（每周≥150分钟）、减少精神压力。' },
|
||||
{ color: '#1677ff', name: '药物治疗原则', desc: '小剂量起始，优先选用长效制剂，联合用药，个体化治疗。血压目标：一般患者<140/90 mmHg，高危患者<130/80 mmHg。' }
|
||||
]
|
||||
},
|
||||
'migraine': {
|
||||
icon: '🧠', bg: '#fff1f0', title: '偏头痛的诊断与治疗', cat: '疾病知识', date: '2026-03-05',
|
||||
summary: '偏头痛是一种反复发作的神经血管性头痛，以单侧搏动性头痛为主要特征，常伴恶心、畏光、畏声，严重影响生活质量。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '诊断要点', desc: '发作5次以上；持续4-72小时；单侧、搏动性、中重度；活动加重；伴恶心/呕吐或畏光/畏声。需排除继发性头痛。' },
|
||||
{ color: '#fa8c16', name: '急性期治疗', desc: '轻中度：NSAIDs（布洛芬600mg）或对乙酰氨基酚。中重度：曲普坦类（舒马曲坦50-100mg）为首选，发作早期使用效果最佳。' },
|
||||
{ color: '#722ed1', name: '预防性治疗', desc: '每月发作≥4次或严重影响生活时考虑预防用药。常用药物：普萘洛尔、托吡酯、阿米替林、丙戊酸钠。' }
|
||||
]
|
||||
},
|
||||
'nutrition': {
|
||||
icon: '🥗', bg: '#f6ffed', title: '职场人群营养膳食指南', cat: '保健知识', date: '2026-02-28',
|
||||
summary: '久坐办公人群因活动量少、饮食不规律，易出现超重、血脂异常、颈椎病等问题。科学膳食是维护健康的基础。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '能量与三大营养素', desc: '每日能量摄入：轻体力劳动男性2250kcal，女性1800kcal。碳水化合物50-65%，蛋白质15-20%，脂肪20-30%。' },
|
||||
{ color: '#1677ff', name: '重点营养建议', desc: '增加蔬菜水果（每日500g以上）；减少精制碳水和加工食品；优选全谷物；每周鱼类2次以上；控制红肉摄入。' },
|
||||
{ color: '#fa8c16', name: '饮食行为干预', desc: '规律三餐，避免不吃早餐；控制外卖频率；减少含糖饮料；每日饮水1500-1700ml；避免久坐后立即进食。' }
|
||||
]
|
||||
},
|
||||
'exercise': {
|
||||
icon: '🏃', bg: '#e6f4ff', title: '运动与心血管健康', cat: '保健知识', date: '2026-02-25',
|
||||
summary: '规律有氧运动是预防和改善心血管疾病的重要非药物手段，可降低血压、改善血脂、控制体重、减少心血管事件风险。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '运动推荐量', desc: '每周≥150分钟中等强度有氧运动（如快走、游泳、骑车），或≥75分钟高强度运动。每次至少10分钟，分散进行亦有效。' },
|
||||
{ color: '#52c41a', name: '运动强度判断', desc: '中等强度：运动时心率达最大心率（220-年龄）的50-70%，可说话但不能唱歌。高强度：心率达70-85%，说话困难。' },
|
||||
{ color: '#ff4d4f', name: '特殊人群注意事项', desc: '高血压患者避免憋气用力动作；冠心病患者运动前需评估；运动前热身5-10分钟，运动后拉伸放松，避免突然停止。' }
|
||||
]
|
||||
}
|
||||
};
|
||||
function renderDetail() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var key = params.get('key') || 'blood-routine';
|
||||
var d = KB_DATA[key];
|
||||
if (!d) d = KB_DATA['blood-routine'];
|
||||
document.getElementById('kd-nav-title').textContent = d.title;
|
||||
var itemsHtml = d.items.map(function(it) {
|
||||
return '<div style="background:#f7f8fa;border-radius:10px;padding:14px;margin-bottom:12px;">' +
|
||||
'<div style="font-size:13px;font-weight:600;color:' + it.color + ';margin-bottom:6px;">' + it.name + '</div>' +
|
||||
'<div style="font-size:13px;color:#444;line-height:1.7;">' + it.desc + '</div>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
document.getElementById('kd-content').innerHTML =
|
||||
'<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f5f5f5;">' +
|
||||
'<div style="width:48px;height:48px;border-radius:12px;background:' + d.bg + ';display:flex;align-items:center;justify-content:center;font-size:24px;">' + d.icon + '</div>' +
|
||||
'<div><div style="font-size:17px;font-weight:700;color:#1a1a1a;">' + d.title + '</div><div style="font-size:12px;color:#999;margin-top:3px;">' + d.cat + ' · 更新于 ' + d.date + '</div></div>' +
|
||||
'</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">概述</div>' +
|
||||
'<div style="font-size:14px;color:#444;line-height:1.8;margin-bottom:16px;">' + d.summary + '</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">主要内容</div>' +
|
||||
itemsHtml;
|
||||
}
|
||||
renderDetail();
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.sub-tabs { display: flex; gap: 8px; padding: 10px 16px; background: #fff; flex-shrink: 0; }
|
||||
.sub-tab { font-size: 12px; padding: 4px 14px; border-radius: 16px; background: #f5f5f5; color: #666; cursor: pointer; transition: all 0.2s; }
|
||||
.sub-tab.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.kb-item { background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 10px; cursor: pointer; }
|
||||
.kb-item__icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
||||
.kb-item__info { flex: 1; }
|
||||
.kb-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.kb-item__desc { font-size: 12px; color: #999; margin-top: 3px; }
|
||||
.pdf-item { background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 10px; cursor: pointer; }
|
||||
.pdf-item__icon { width: 44px; height: 44px; border-radius: 10px; background: #fff1f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.pdf-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.pdf-item__meta { font-size: 12px; color: #999; margin-top: 3px; display: flex; gap: 8px; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div></div>
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">驻场工作参考</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">知识库</div>
|
||||
</div>
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTopTab(this,'panel-article')">知识文章</div>
|
||||
<div class="seg-tab" onclick="switchTopTab(this,'panel-rule')">规章制度</div>
|
||||
</div>
|
||||
<div id="panel-article" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<div class="sub-tabs">
|
||||
<div class="sub-tab active" onclick="switchKbTab(this,'kb-dispatch')">调度流程</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-first-aid')">急救知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-comm')">沟通技巧</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div id="kb-dispatch"><div style="padding:12px 16px 0;">
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=dispatch-flow'"><div class="kb-item__icon" style="background:#e6f4ff;">📋</div><div class="kb-item__info"><div class="kb-item__name">应急调度标准流程</div><div class="kb-item__desc">从接警到结案的完整调度操作规范</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=triage'"><div class="kb-item__icon" style="background:#fff1f0;">🚨</div><div class="kb-item__info"><div class="kb-item__name">紧急程度分级标准</div><div class="kb-item__desc">如何快速判断应急事件的紧急等级</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=ambulance'"><div class="kb-item__icon" style="background:#fff7e6;">🚑</div><div class="kb-item__info"><div class="kb-item__name">救护车调度规范</div><div class="kb-item__desc">救护车派遣条件、路线规划与交接流程</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=handover'"><div class="kb-item__icon" style="background:#f6ffed;">🔄</div><div class="kb-item__info"><div class="kb-item__name">交接班操作指南</div><div class="kb-item__desc">值班交接的标准流程与注意事项</div></div></div>
|
||||
</div><div style="height:16px;"></div></div>
|
||||
<div id="kb-first-aid" style="display:none;"><div style="padding:12px 16px 0;">
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=cpr'"><div class="kb-item__icon" style="background:#fff1f0;">❤️</div><div class="kb-item__info"><div class="kb-item__name">心肺复苏（CPR）指导要点</div><div class="kb-item__desc">电话指导现场人员进行CPR的话术与步骤</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=chest-pain'"><div class="kb-item__icon" style="background:#fff7e6;">🫀</div><div class="kb-item__info"><div class="kb-item__name">胸痛应急处置流程</div><div class="kb-item__desc">胸痛患者的快速评估与调度决策</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=trauma'"><div class="kb-item__icon" style="background:#e6f4ff;">🩹</div><div class="kb-item__info"><div class="kb-item__name">创伤急救电话指导</div><div class="kb-item__desc">骨折、出血等创伤的远程指导要点</div></div></div>
|
||||
</div><div style="height:16px;"></div></div>
|
||||
<div id="kb-comm" style="display:none;"><div style="padding:12px 16px 0;">
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=calm-caller'"><div class="kb-item__icon" style="background:#f6ffed;">🗣️</div><div class="kb-item__info"><div class="kb-item__name">安抚求助者情绪技巧</div><div class="kb-item__desc">如何在电话中稳定求助者情绪获取关键信息</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=multi-party'"><div class="kb-item__icon" style="background:#e6f4ff;">👥</div><div class="kb-item__info"><div class="kb-item__name">多方协调沟通规范</div><div class="kb-item__desc">操作人员与专业人员、驻场人员的协作沟通</div></div></div>
|
||||
</div><div style="height:16px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="panel-rule" style="display:none;flex:1;overflow-y:auto;background:#f7f8fa;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">应急调度管理办法（2026版）</div><div class="pdf-item__meta"><span>PDF · 2.1MB</span><span>2026-01-10</span></div></div></div>
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">应急救护操作规范</div><div class="pdf-item__meta"><span>PDF · 3.1MB</span><span>2025-09-15</span></div></div></div>
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">大病就医审批流程细则</div><div class="pdf-item__meta"><span>PDF · 1.5MB</span><span>2025-11-20</span></div></div></div>
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">值班排班管理制度</div><div class="pdf-item__meta"><span>PDF · 0.8MB</span><span>2025-10-05</span></div></div></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="location.href='../workbench/index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function switchTopTab(el, panelId) {
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
var dm = { 'panel-article': 'flex', 'panel-rule': 'block' };
|
||||
['panel-article','panel-rule'].forEach(function(id) { var p = document.getElementById(id); if (p) p.style.display = id === panelId ? dm[id] : 'none'; });
|
||||
}
|
||||
function switchKbTab(el, panelId) {
|
||||
el.closest('.sub-tabs').querySelectorAll('.sub-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
['kb-dispatch','kb-first-aid','kb-comm'].forEach(function(id) { var p = document.getElementById(id); if (p) p.style.display = id === panelId ? 'block' : 'none'; });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.btn-primary { background: #1677ff; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">修改密码</span>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">当前密码</span>
|
||||
<input type="password" placeholder="请输入当前密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">新密码</span>
|
||||
<input type="password" placeholder="请输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">确认新密码</span>
|
||||
<input type="password" placeholder="再次输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="openModal('modal-pwd-saved')" class="btn-primary">保存修改</button>
|
||||
</div>
|
||||
<div id="modal-pwd-saved" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">修改成功</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">密码已更新，下次登录请使用新密码。</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-pwd-saved');location.href='./index.html'" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,168 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; position: relative; flex-shrink: 0; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.duty-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: linear-gradient(135deg,#e6f4ff,#f0f5ff); margin-bottom: 12px; }
|
||||
.duty-summary__main { font-size: 14px; font-weight: 600; color: #1677ff; }
|
||||
.duty-summary__tag { padding: 4px 10px; border-radius: 999px; background: #1677ff; color: #fff; font-size: 11px; font-weight: 600; }
|
||||
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.cal-header__month { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.cal-header__nav { display: flex; gap: 6px; }
|
||||
.cal-header__btn { width: 28px; height: 28px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; color: #666; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-week { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: 11px; color: #999; margin-bottom: 4px; }
|
||||
.cal-week span { padding: 4px 0; }
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
|
||||
.cal-day { min-height: 42px; border-radius: 10px; background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: #1a1a1a; position: relative; }
|
||||
.cal-day--other { color: #bbb; background: transparent; }
|
||||
.cal-day--today { background: #1677ff; color: #fff; font-weight: 700; }
|
||||
.cal-day--duty { border: 1px solid #91caff; background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.cal-day--today.cal-day--duty { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: #1677ff; margin-top: 3px; }
|
||||
.cal-day--today .cal-dot { background: #fff; }
|
||||
.legend { display: flex; gap: 14px; align-items: center; margin-top: 12px; font-size: 11px; color: #666; }
|
||||
.legend-item { display: flex; align-items: center; gap: 5px; }
|
||||
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.legend-dot--today { background: #1677ff; }
|
||||
.legend-dot--duty { background: #91caff; }
|
||||
.duty-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.duty-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: #fafafa; }
|
||||
.duty-item__avatar { width: 38px; height: 38px; border-radius: 50%; background: #e6f4ff; color: #1677ff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
|
||||
.duty-item__info { flex: 1; min-width: 0; }
|
||||
.duty-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.duty-item__role { font-size: 11px; color: #999; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">值班信息</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="card">
|
||||
<div class="card-title">值班日历</div>
|
||||
<div class="duty-summary">
|
||||
<div>
|
||||
<div class="duty-summary__main">长庆油田职工医院</div>
|
||||
</div>
|
||||
<span class="duty-summary__tag">今日当班</span>
|
||||
</div>
|
||||
<div class="cal-header">
|
||||
<span class="cal-header__month" id="calMonth"></span>
|
||||
<div class="cal-header__nav">
|
||||
<button class="cal-header__btn" onclick="changeMonth(-1)">‹</button>
|
||||
<button class="cal-header__btn" onclick="changeMonth(1)">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-week"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
|
||||
<div class="cal-grid" id="calGrid"></div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><span class="legend-dot legend-dot--today"></span><span>今天</span></div>
|
||||
<div class="legend-item"><span class="legend-dot legend-dot--duty"></span><span>排班日</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">今日值班人员</div>
|
||||
<div class="duty-list">
|
||||
<div class="duty-item">
|
||||
<div class="duty-item__avatar">赵</div>
|
||||
<div class="duty-item__info">
|
||||
<div class="duty-item__name">赵磊</div>
|
||||
</div>
|
||||
<div class="duty-item__role">驻场人员</div>
|
||||
</div>
|
||||
<div class="duty-item">
|
||||
<div class="duty-item__avatar">李</div>
|
||||
<div class="duty-item__info">
|
||||
<div class="duty-item__name">李明</div>
|
||||
</div>
|
||||
<div class="duty-item__role">操作人员</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole','onsite');
|
||||
var _calYear, _calMonth;
|
||||
var _dutyDays = {
|
||||
2026: {
|
||||
4: [1,2,3,7,8,9,10,14,15,16,17,21,22,23,24,28,29,30],
|
||||
5: [6,7,8,11,12,13,14,18,19,20,21,25,26,27,28],
|
||||
6: [1,2,3,4,8,9,10,11,15,16,17,18,22,23,24,25,29,30]
|
||||
}
|
||||
};
|
||||
function initCalendar() {
|
||||
var d = new Date(2026, 3, 24);
|
||||
_calYear = d.getFullYear();
|
||||
_calMonth = d.getMonth() + 1;
|
||||
renderCalendar();
|
||||
}
|
||||
function changeMonth(dir) {
|
||||
_calMonth += dir;
|
||||
if (_calMonth < 1) { _calMonth = 12; _calYear--; }
|
||||
if (_calMonth > 12) { _calMonth = 1; _calYear++; }
|
||||
renderCalendar();
|
||||
}
|
||||
function renderCalendar() {
|
||||
document.getElementById('calMonth').textContent = _calYear + '年' + _calMonth + '月';
|
||||
var grid = document.getElementById('calGrid');
|
||||
grid.innerHTML = '';
|
||||
var firstDay = new Date(_calYear, _calMonth - 1, 1).getDay();
|
||||
var daysInMonth = new Date(_calYear, _calMonth, 0).getDate();
|
||||
var prevDays = new Date(_calYear, _calMonth - 1, 0).getDate();
|
||||
var todayYear = 2026, todayMonth = 4, todayDate = 24;
|
||||
var duties = (_dutyDays[_calYear] && _dutyDays[_calYear][_calMonth]) || [];
|
||||
for (var i = firstDay - 1; i >= 0; i--) {
|
||||
var prevEl = document.createElement('div');
|
||||
prevEl.className = 'cal-day cal-day--other';
|
||||
prevEl.textContent = prevDays - i;
|
||||
grid.appendChild(prevEl);
|
||||
}
|
||||
for (var d = 1; d <= daysInMonth; d++) {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'cal-day';
|
||||
var isToday = _calYear === todayYear && _calMonth === todayMonth && d === todayDate;
|
||||
var isDuty = duties.indexOf(d) > -1;
|
||||
if (isToday) el.className += ' cal-day--today';
|
||||
if (isDuty) el.className += ' cal-day--duty';
|
||||
el.innerHTML = '<span>' + d + '</span>';
|
||||
if (isDuty) { var dot = document.createElement('span'); dot.className = 'cal-dot'; el.appendChild(dot); }
|
||||
grid.appendChild(el);
|
||||
}
|
||||
var total = firstDay + daysInMonth;
|
||||
var remain = total % 7 === 0 ? 0 : 7 - total % 7;
|
||||
for (var j = 1; j <= remain; j++) {
|
||||
var nextEl = document.createElement('div');
|
||||
nextEl.className = 'cal-day cal-day--other';
|
||||
nextEl.textContent = j;
|
||||
grid.appendChild(nextEl);
|
||||
}
|
||||
}
|
||||
initCalendar();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; text-decoration: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.avatar-section { display: flex; flex-direction: column; align-items: center; padding: 32px 0 24px; background: #fff; }
|
||||
.avatar-wrap { position: relative; cursor: pointer; }
|
||||
.avatar-img { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #e6f4ff, #91caff); display: flex; align-items: center; justify-content: center; font-size: 40px; border: 3px solid #f0f0f0; }
|
||||
.avatar-badge { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; background: #1677ff; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
|
||||
.avatar-hint { font-size: 13px; color: #999; margin-top: 10px; }
|
||||
.form-group { background: #fff; margin: 12px 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.form-row { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f5f5f5; }
|
||||
.form-row:last-child { border-bottom: none; }
|
||||
.form-label { font-size: 15px; color: #1a1a1a; width: 72px; flex-shrink: 0; }
|
||||
.form-input { flex: 1; font-size: 15px; color: #1a1a1a; border: none; outline: none; background: transparent; text-align: right; }
|
||||
.form-input::placeholder { color: #ccc; }
|
||||
.bottom-action { padding: 16px; flex-shrink: 0; background: #f7f8fa; }
|
||||
.btn-save { width: 100%; padding: 14px; background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
.action-sheet-mask { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
|
||||
.action-sheet-mask.active { display: block; }
|
||||
.action-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding-bottom: 20px; z-index: 201; transform: translateY(100%); transition: transform 0.3s ease; }
|
||||
.action-sheet-mask.active .action-sheet { transform: translateY(0); }
|
||||
.action-sheet-item { padding: 16px; text-align: center; font-size: 16px; color: #1a1a1a; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.action-sheet-item:active { background: #f5f5f5; }
|
||||
.action-sheet-cancel { padding: 16px; text-align: center; font-size: 16px; color: #999; cursor: pointer; margin-top: 8px; background: #f7f8fa; }
|
||||
.toast { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 300; }
|
||||
.toast.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a href="./index.html" class="back-btn">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</a>
|
||||
<span class="nav-title">修改个人信息</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-wrap" onclick="openSheet()">
|
||||
<div class="avatar-img" id="avatarDisplay">🏥</div>
|
||||
<div class="avatar-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#fff" stroke-width="1.5"><path d="M7 3v8M3 7h8"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar-hint">点击更换头像</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-row">
|
||||
<span class="form-label">姓名</span>
|
||||
<input class="form-input" id="inputName" type="text" value="赵磊" placeholder="请输入姓名" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-action">
|
||||
<button class="btn-save" onclick="handleSave()">保存</button>
|
||||
</div>
|
||||
<div id="avatarSheet" class="action-sheet-mask" onclick="closeSheet(event)">
|
||||
<div class="action-sheet">
|
||||
<div class="action-sheet-item" onclick="pickAvatar('camera')">拍照</div>
|
||||
<div class="action-sheet-item" onclick="pickAvatar('album')">从相册选择</div>
|
||||
<div class="action-sheet-cancel" onclick="closeSheet()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toast" class="toast">保存成功</div>
|
||||
</div>
|
||||
<script>
|
||||
function openSheet() {
|
||||
document.getElementById('avatarSheet').classList.add('active');
|
||||
}
|
||||
function closeSheet(e) {
|
||||
if (!e || e.target.id === 'avatarSheet' || e.target.closest('.action-sheet-cancel')) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
}
|
||||
}
|
||||
function pickAvatar(source) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
showToast('已选择：' + (source === 'camera' ? '拍照' : '从相册选择'));
|
||||
}
|
||||
function handleSave() {
|
||||
var name = document.getElementById('inputName').value.trim();
|
||||
if (!name) { showToast('请输入姓名'); return; }
|
||||
showToast('保存成功');
|
||||
}
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('active');
|
||||
setTimeout(function() { t.classList.remove('active'); }, 1500);
|
||||
}
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #fff; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.menu-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.menu-item { display: flex; align-items: center; padding: 16px; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.logout-btn { width: 100%; height: 48px; border: none; border-radius: 12px; background: #fff1f0; color: #ff4d4f; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:60px 20px 24px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<div style="width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#e6f4ff,#91caff);display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid rgba(255,255,255,0.5);">🏥</div>
|
||||
<div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">赵磊</div>
|
||||
<div style="color:rgba(255,255,255,0.8);font-size:13px;margin-top:3px;">驻场人员</div>
|
||||
<div style="color:rgba(255,255,255,0.78);font-size:12px;margin-top:4px;">所属医院：长庆油田职工医院</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<div class="menu-card">
|
||||
<div class="menu-item" onclick="location.href='./duty-schedule.html'"><span style="font-size:18px;margin-right:12px;">📅</span><span style="font-size:15px;color:#1a1a1a;flex:1;">值班信息</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div class="menu-item" onclick="location.href='./edit-profile.html'"><span style="font-size:18px;margin-right:12px;">📝</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改个人信息</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div class="menu-item" onclick="location.href='./change-pwd.html'"><span style="font-size:18px;margin-right:12px;">🔒</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改密码</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div style="display:flex;align-items:center;padding:16px;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">ℹ️</span><span style="font-size:15px;color:#1a1a1a;flex:1;">关于我们</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;">
|
||||
<button class="logout-btn" onclick="openModal('modal-logout')">退出登录</button>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<div id="modal-logout" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">退出登录</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">确认退出当前账号？</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#ff4d4f;font-weight:600;">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="location.href='../workbench/index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,175 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.primary-tabs { display: flex; gap: 8px; padding: 12px 16px 8px; background: #f7f8fa; }
|
||||
.primary-tab { flex: 1; height: 38px; border-radius: 19px; background: #fff; color: #666; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); border: 1px solid transparent; text-decoration: none; }
|
||||
.primary-tab.active { color: #1677ff; border-color: #b7d8ff; background: #e6f4ff; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
.content-panel { display: none; }
|
||||
.content-panel.active { display: block; }
|
||||
.case-card { background: #fff; border-radius: 12px; margin: 0 16px 10px; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.case-head { display: flex; align-items: center; gap: 10px; }
|
||||
.case-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.case-avatar-emergency { background: linear-gradient(135deg,#fff1f0,#ffccc7); }
|
||||
.case-main { flex: 1; min-width: 0; }
|
||||
.case-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.case-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.case-meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，赵磊</div>
|
||||
<div style="color:rgba(255,255,255,0.82);font-size:12px;margin-bottom:4px;">所属医院：长庆油田职工医院</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">驻场人员</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">应急待处理</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">3</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">大病待处理</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一级Tab -->
|
||||
<div class="primary-tabs">
|
||||
<a class="primary-tab active" href="./index.html">应急求助</a>
|
||||
<a class="primary-tab" href="./serious-illness-list.html">大病就医</a>
|
||||
</div>
|
||||
|
||||
<!-- 二级Tab：待处理 / 已完成 -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-pending')">待处理<span class="badge">2</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 待处理 -->
|
||||
<div id="panel-pending" class="content-panel active">
|
||||
<div style="height:10px;"></div>
|
||||
<div class="case-card" onclick="location.href='./work-order-detail-ongoing.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">🚑</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">陈伟<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">47岁</span></div>
|
||||
<span class="tag tag-orange">待处理</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-27 14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" onclick="location.href='./work-order-detail-ongoing.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">🚑</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">刘海波<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">55岁</span></div>
|
||||
<span class="tag tag-orange">待处理</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-27 10:20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已完成 -->
|
||||
<div id="panel-done" class="content-panel">
|
||||
<div style="height:10px;"></div>
|
||||
<div class="case-card" onclick="location.href='./work-order-detail.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">✅</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">赵志强<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">61岁</span></div>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-25 08:15</div>
|
||||
<div class="case-meta">结束时间：2026-04-25 18:20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" onclick="location.href='./work-order-detail.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">✅</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">孙莉<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">29岁</span></div>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-24 09:10</div>
|
||||
<div class="case-meta">结束时间：2026-04-24 15:05</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
|
||||
function switchTab(el, panelId) {
|
||||
el.parentElement.querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.content-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
document.getElementById(panelId).classList.add('active');
|
||||
}
|
||||
|
||||
var defaultTab = sessionStorage.getItem('onsiteWorkbenchTab');
|
||||
if (defaultTab === 'done') {
|
||||
var doneTab = document.querySelectorAll('.seg-tab')[1];
|
||||
switchTab(doneTab, 'panel-done');
|
||||
sessionStorage.removeItem('onsiteWorkbenchTab');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #52c41a; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.info-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.info-card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.info-card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.info-card__body { padding: 0 16px 16px; }
|
||||
.info-card--collapsed .info-card__body { display: none; }
|
||||
.info-card--collapsed .info-card__arrow { transform: rotate(-90deg); }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div></div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()"><svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回</button>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">已完成</div>
|
||||
<div class="status-area__desc">已完成挂号，排队序号：05</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="employee-card">
|
||||
<div class="info-card__header" onclick="toggleCard('employee-card', this)">
|
||||
<div class="info-card__title">申请员工信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">姓名</span><span class="info-card__value">冯凯</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">性别</span><span class="info-card__value">男</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">年龄</span><span class="info-card__value">38岁</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">员工编号</span><span class="info-card__value">CY4-20150321</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属单位</span><span class="info-card__value">采油四厂</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">联系电话</span><span class="info-card__value">137-0012-8899</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">身份证</span><span class="info-card__value">610104198803XXXXXX</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="booking-card">
|
||||
<div class="info-card__header" onclick="toggleCard('booking-card', this)">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">长庆油田职工医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">骨科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">陈志远</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">普通号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约时间</span><span class="info-card__value">2026-04-24 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">腰椎间盘突出压迫神经，行走困难需复查</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="result-card">
|
||||
<div class="info-card__header" onclick="toggleCard('result-card', this)">
|
||||
<div class="info-card__title">挂号结果</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">就诊科室</span><span class="info-card__value">骨科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊医生</span><span class="info-card__value">陈志远</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊时段</span><span class="info-card__value">2026-04-24 09:00–09:20</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">排队序号</span><span class="info-card__value">05</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊医院</span><span class="info-card__value">长庆油田职工医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">普通号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">备注</span><span class="info-card__value">复查结果正常</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function toggleCard(id, trigger) {
|
||||
var card = document.getElementById(id);
|
||||
card.classList.toggle('info-card--collapsed');
|
||||
var text = trigger.querySelector('.info-card__toggle span');
|
||||
if (text) text.textContent = card.classList.contains('info-card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #fa8c16; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.info-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.info-card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.info-card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.info-card__body { padding: 0 16px 16px; }
|
||||
.info-card--collapsed .info-card__body { display: none; }
|
||||
.info-card--collapsed .info-card__arrow { transform: rotate(-90deg); }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
.form-field { margin-bottom: 14px; }
|
||||
.form-label { font-size: 13px; color: #666; margin-bottom: 6px; display: flex; align-items: center; gap: 3px; }
|
||||
.form-label .req { color: #ff4d4f; }
|
||||
.form-input { width: 100%; height: 38px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 0 12px; font-size: 13px; color: #333; outline: none; }
|
||||
.form-input:focus { border-color: #1677ff; }
|
||||
.form-textarea { width: 100%; min-height: 68px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #333; outline: none; resize: none; font-family: inherit; line-height: 1.6; }
|
||||
.form-textarea:focus { border-color: #1677ff; }
|
||||
.bottom-btns { padding: 12px 16px 28px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 12px; }
|
||||
.bottom-btns__btn { flex: 1; height: 44px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
|
||||
.bottom-btns__btn--secondary { background: #fff; color: #666; border: 1px solid #d9d9d9; }
|
||||
.bottom-btns__btn--primary { background: #1677ff; color: #fff; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div></div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()"><svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回</button>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">待处理</div>
|
||||
<div class="status-area__desc">请尽快前往医院完成挂号</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="employee-card">
|
||||
<div class="info-card__header" onclick="toggleCard('employee-card', this)">
|
||||
<div class="info-card__title">申请员工信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">姓名</span><span class="info-card__value">周敏</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">性别</span><span class="info-card__value">女</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">年龄</span><span class="info-card__value">42岁</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">员工编号</span><span class="info-card__value">CY3-20180156</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属单位</span><span class="info-card__value">采油三厂</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">联系电话</span><span class="info-card__value">138-9201-5567</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">身份证</span><span class="info-card__value">610102198401XXXXXX</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="booking-card">
|
||||
<div class="info-card__header" onclick="toggleCard('booking-card', this)">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">心血管内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">李建国</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约时间</span><span class="info-card__value">2026-04-28 09:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">心脏瓣膜病变加重，需专家会诊评估手术方案</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="result-card">
|
||||
<div class="info-card__header" onclick="toggleCard('result-card', this)">
|
||||
<div class="info-card__title">填写挂号结果</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="form-field">
|
||||
<div class="form-label"><span class="req">*</span>就诊时段</div>
|
||||
<input class="form-input" type="text" placeholder="如：2026-04-28 09:00-09:20" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label"><span class="req">*</span>排队序号</div>
|
||||
<input class="form-input" type="text" placeholder="如：05" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label">备注</div>
|
||||
<textarea class="form-textarea" placeholder="如有特殊情况请备注说明"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-btns">
|
||||
<button class="bottom-btns__btn bottom-btns__btn--secondary" onclick="openModal('modal-contact')">联系操作人员</button>
|
||||
<button class="bottom-btns__btn bottom-btns__btn--primary" onclick="openModal('modal-submit')">提交挂号结果</button>
|
||||
</div>
|
||||
|
||||
<div id="modal-submit" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">提交挂号结果</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">确认提交挂号结果？提交后将通知操作人员和申请员工。</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-submit')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button onclick="closeModal('modal-submit');location.href='./serious-illness-list.html'" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">确认提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-contact" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">联系操作人员</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">操作人员：李明<br>电话：138-9201-3001</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-contact')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">关闭</button>
|
||||
<button onclick="closeModal('modal-contact')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">拨打电话</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function toggleCard(id, trigger) {
|
||||
var card = document.getElementById(id);
|
||||
card.classList.toggle('info-card--collapsed');
|
||||
var text = trigger.querySelector('.info-card__toggle span');
|
||||
if (text) text.textContent = card.classList.contains('info-card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,184 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.primary-tabs { display: flex; gap: 8px; padding: 12px 16px 8px; background: #f7f8fa; }
|
||||
.primary-tab { flex: 1; height: 38px; border-radius: 19px; background: #fff; color: #666; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); border: 1px solid transparent; text-decoration: none; }
|
||||
.primary-tab.active { color: #1677ff; border-color: #b7d8ff; background: #e6f4ff; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
.content-panel { display: none; }
|
||||
.content-panel.active { display: block; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 0 16px 10px; padding: 16px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform .15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__hospital { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.card__status--pending { background: #fff7e6; color: #fa8c16; }
|
||||
.card__status--done { background: #f6ffed; color: #52c41a; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info .card__employee { color: #1a1a1a; font-weight: 500; }
|
||||
.card__tip { font-size: 12px; color: #999; margin-top: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，赵磊</div>
|
||||
<div style="color:rgba(255,255,255,0.82);font-size:12px;margin-bottom:4px;">所属医院：长庆油田职工医院</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">工作台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">应急待处理</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">3</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">大病待处理</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一级Tab -->
|
||||
<div class="primary-tabs">
|
||||
<a class="primary-tab" href="./index.html">应急求助</a>
|
||||
<a class="primary-tab active" href="./serious-illness-list.html">大病就医</a>
|
||||
</div>
|
||||
|
||||
<!-- 二级Tab：待处理 / 已完成 -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-pending')">待处理<span class="badge">3</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 待处理 -->
|
||||
<div id="panel-pending" class="content-panel active">
|
||||
<div style="height:10px;"></div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-pending.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--pending">待处理</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">周敏 · 采油三厂</span></div>
|
||||
<div>科室：心血管内科 · 李建国</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>预约时间：2026-04-28 09:00</div>
|
||||
</div>
|
||||
<div class="card__tip">请尽快前往医院完成挂号</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-pending.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">西安交大一附院</span>
|
||||
<span class="card__status card__status--pending">待处理</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">韩涛 · 采油五厂</span></div>
|
||||
<div>科室：肿瘤放疗科 · 王明辉</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>预约时间：2026-04-28 14:00</div>
|
||||
</div>
|
||||
<div class="card__tip">请尽快前往医院完成挂号</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-pending.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">长庆油田职工医院</span>
|
||||
<span class="card__status card__status--pending">待处理</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">李建华 · 采油二厂</span></div>
|
||||
<div>科室：骨科 · 赵伟民</div>
|
||||
<div>挂号类别：普通号</div>
|
||||
<div>预约时间：2026-04-29 10:00</div>
|
||||
</div>
|
||||
<div class="card__tip">请尽快前往医院完成挂号</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已完成 -->
|
||||
<div id="panel-done" class="content-panel">
|
||||
<div style="height:10px;"></div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-done.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">长庆油田职工医院</span>
|
||||
<span class="card__status card__status--done">已完成</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">冯凯 · 采油四厂</span></div>
|
||||
<div>科室：骨科 · 陈志远</div>
|
||||
<div>挂号类别：普通号</div>
|
||||
<div>就诊时段：2026-04-24 09:00–09:20</div>
|
||||
</div>
|
||||
<div class="card__tip">已完成挂号，排队序号：05</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-done.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--done">已完成</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">张伟 · 采油一厂</span></div>
|
||||
<div>科室：神经内科 · 刘芳</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>就诊时段：2026-04-22 14:00–14:20</div>
|
||||
</div>
|
||||
<div class="card__tip">已完成挂号，排队序号：12</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
|
||||
function switchTab(el, panelId) {
|
||||
el.parentElement.querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.content-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
document.getElementById(panelId).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,177 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||||
.card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.card__body { padding: 0 16px 16px; }
|
||||
.card--collapsed .card__body { display: none; }
|
||||
.card--collapsed .card__arrow { transform: rotate(-90deg); }
|
||||
.card--collapsed .card__header { border-bottom: none; }
|
||||
.info-item { display: flex; font-size: 13px; line-height: 1.6; padding: 5px 0; }
|
||||
.info-item__label { color: #999; min-width: 72px; flex-shrink: 0; }
|
||||
.info-item__value { color: #333; flex: 1; word-break: break-all; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
.location-link { color: #1677ff; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.desc-block { padding: 6px 0; }
|
||||
.desc-block__label { font-size: 13px; color: #999; margin-bottom: 6px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.form-textarea { width: 100%; border: 1px solid #d9d9d9; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #333; background: #fff; outline: none; min-height: 82px; resize: none; line-height: 1.7; font-family: inherit; }
|
||||
.form-textarea:focus { border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22,119,255,0.12); }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 8px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; }
|
||||
.photo-item__mask { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,0.42); color: #fff; font-size: 10px; text-align: center; padding: 3px 0; }
|
||||
.photo-add { width: 90px; height: 68px; border-radius: 8px; border: 1px dashed #91caff; background: #f7fbff; color: #1677ff; font-size: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
|
||||
.photo-add span:first-child { font-size: 18px; line-height: 1; }
|
||||
.bottom-action { padding: 12px 16px; background: #fff; border-top: 1px solid #e8e8e8; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.btn-primary { flex: 1; height: 44px; border: none; border-radius: 10px; background: #1677ff; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
.btn-secondary { flex: 1; height: 44px; border: 1px solid #d9d9d9; border-radius: 10px; background: #fff; color: #666; font-size: 15px; font-weight: 500; cursor: pointer; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">工单详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="card" id="basic-card">
|
||||
<div class="card__header" onclick="toggleCard('basic-card')">
|
||||
<div class="card__title">基本信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">工单编号</span><span class="info-item__value">YJ5633280</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助员工</span><span class="info-item__value">陈伟（47岁）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value">采油一厂 · 第一作业区</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助方式</span><span class="info-item__value">应急视频</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-04-27 14:30</span></div>
|
||||
<div class="info-item"><span class="info-item__label">位置信息</span><span class="info-item__value"><span class="location-link"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省庆阳市华池县采油一厂作业区</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">操作人员</span><span class="info-item__value">李明</span></div>
|
||||
<div class="info-item"><span class="info-item__label">专业人员</span><span class="info-item__value">张旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单状态</span><span class="info-item__value"><span class="tag tag-orange">待处理</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="rescue-card">
|
||||
<div class="card__header" onclick="toggleCard('rescue-card')">
|
||||
<div class="card__title">救助信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助意见：</div>
|
||||
<div class="desc-block__text">建议患者保持制动，持续观察左膝肿胀情况，需尽快转送医院进一步检查。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助结果：</div>
|
||||
<div class="desc-block__text" style="color:#999;">暂未填写</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="dispatch-card">
|
||||
<div class="card__header" onclick="toggleCard('dispatch-card')">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">派单时间</span><span class="info-item__value">2026-04-27 14:35</span></div>
|
||||
<div class="info-item"><span class="info-item__label">派单说明</span><span class="info-item__value">请尽快前往现场协助员工就医，需陪同前往华池县人民医院急诊科</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="onsite-card">
|
||||
<div class="card__header" onclick="toggleCard('onsite-card')">
|
||||
<div class="card__title">驻场处理</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">驻场说明：</div>
|
||||
<textarea class="form-textarea" placeholder="请填写现场处理情况，如：已到达现场、已陪同就医、已完成挂号等"></textarea>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">现场照片：</div>
|
||||
<div class="photo-list">
|
||||
<button class="photo-add" type="button"><span>＋</span><span>上传照片</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-action">
|
||||
<button class="btn-secondary" onclick="openModal('modal-contact')">联系操作人员</button>
|
||||
<button class="btn-primary" onclick="openModal('modal-complete')">完成处理</button>
|
||||
</div>
|
||||
|
||||
<!-- 完成确认弹窗 -->
|
||||
<div id="modal-complete" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">完成处理</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">确认已完成现场处理？提交后将通知操作人员。</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-complete')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button onclick="closeModal('modal-complete');location.href='./index.html'" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">确认完成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系操作人员弹窗 -->
|
||||
<div id="modal-contact" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">联系操作人员</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">操作人员：李明<br>电话：138-9201-3001</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-contact')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">关闭</button>
|
||||
<button onclick="closeModal('modal-contact')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">拨打电话</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function toggleCard(id) {
|
||||
var card = document.getElementById(id);
|
||||
card.classList.toggle('card--collapsed');
|
||||
var label = card.querySelector('.card__toggle span');
|
||||
label.textContent = card.classList.contains('card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,138 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||||
.card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.card__body { padding: 0 16px 16px; }
|
||||
.card--collapsed .card__body { display: none; }
|
||||
.card--collapsed .card__arrow { transform: rotate(-90deg); }
|
||||
.card--collapsed .card__header { border-bottom: none; }
|
||||
.info-item { display: flex; font-size: 13px; line-height: 1.6; padding: 5px 0; }
|
||||
.info-item__label { color: #999; min-width: 72px; flex-shrink: 0; }
|
||||
.info-item__value { color: #333; flex: 1; word-break: break-all; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.location-link { color: #1677ff; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.desc-block { padding: 6px 0; }
|
||||
.desc-block__label { font-size: 13px; color: #999; margin-bottom: 6px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 8px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">工单详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="card" id="basic-card">
|
||||
<div class="card__header" onclick="toggleCard('basic-card')">
|
||||
<div class="card__title">基本信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">工单编号</span><span class="info-item__value">YJ5633256</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助员工</span><span class="info-item__value">赵志强（61岁）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value">公司机关 · 健康科</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助方式</span><span class="info-item__value">应急视频</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-04-25 08:15</span></div>
|
||||
<div class="info-item"><span class="info-item__label">位置信息</span><span class="info-item__value"><span class="location-link"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省西安市雁塔区电子一路56号</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">操作人员</span><span class="info-item__value">李明</span></div>
|
||||
<div class="info-item"><span class="info-item__label">专业人员</span><span class="info-item__value">刘旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单状态</span><span class="info-item__value"><span class="tag tag-green">已完成</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">完成时间</span><span class="info-item__value">2026-04-25 18:20</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="rescue-card">
|
||||
<div class="card__header" onclick="toggleCard('rescue-card')">
|
||||
<div class="card__title">救助信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助意见：</div>
|
||||
<div class="desc-block__text">建议立即送往最近医院急诊科进行头颅CT检查，排除脑血管意外可能。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助结果：</div>
|
||||
<div class="desc-block__text">员工已送达长庆油田职工医院急诊科，完成头颅CT检查，排除脑出血，诊断为高血压引起的眩晕，已开具降压药物并留观。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="dispatch-card">
|
||||
<div class="card__header" onclick="toggleCard('dispatch-card')">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">派单时间</span><span class="info-item__value">2026-04-25 08:25</span></div>
|
||||
<div class="info-item"><span class="info-item__label">派单说明</span><span class="info-item__value">给这个员工紧急挂号就诊，需要拍头颅CT</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="onsite-card">
|
||||
<div class="card__header" onclick="toggleCard('onsite-card')">
|
||||
<div class="card__title">驻场处理</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">驻场说明：</div>
|
||||
<div class="desc-block__text">已经挂号并且开了头颅CT检查单，已陪同就诊完毕，员工状态稳定。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">现场照片：</div>
|
||||
<div class="photo-list">
|
||||
<div class="photo-item">现场照片 1</div>
|
||||
<div class="photo-item">现场照片 2</div>
|
||||
<div class="photo-item">现场照片 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item"><span class="info-item__label">完成时间</span><span class="info-item__value">2026-04-25 18:15</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'onsite');
|
||||
function toggleCard(id) {
|
||||
var card = document.getElementById(id);
|
||||
card.classList.toggle('card--collapsed');
|
||||
var label = card.querySelector('.card__toggle span');
|
||||
label.textContent = card.classList.contains('card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div></div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'"><svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回</button>
|
||||
<span class="nav-title" id="kd-nav-title">知识详情</span>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div id="kd-content" style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);"></div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.sub-tabs { display: flex; gap: 8px; padding: 10px 16px; background: #fff; flex-shrink: 0; }
|
||||
.sub-tab { font-size: 12px; padding: 4px 14px; border-radius: 16px; background: #f5f5f5; color: #666; cursor: pointer; transition: all 0.2s; }
|
||||
.sub-tab.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.kb-item { background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 10px; cursor: pointer; }
|
||||
.kb-item__icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
||||
.kb-item__info { flex: 1; }
|
||||
.kb-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.kb-item__desc { font-size: 12px; color: #999; margin-top: 3px; }
|
||||
.pdf-item { background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 10px; cursor: pointer; }
|
||||
.pdf-item__icon { width: 44px; height: 44px; border-radius: 10px; background: #fff1f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.pdf-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.pdf-item__meta { font-size: 12px; color: #999; margin-top: 3px; display: flex; gap: 8px; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div></div>
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">应急调度参考</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">知识库</div>
|
||||
</div>
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTopTab(this,'panel-article')">知识文章</div>
|
||||
<div class="seg-tab" onclick="switchTopTab(this,'panel-rule')">规章制度</div>
|
||||
</div>
|
||||
<!-- 知识文章面板 -->
|
||||
<div id="panel-article" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<div class="sub-tabs">
|
||||
<div class="sub-tab active" onclick="switchKbTab(this,'kb-dispatch')">调度流程</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-first-aid')">急救知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-comm')">沟通技巧</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- PLACEHOLDER_KB_CONTENT -->
|
||||
<div id="kb-dispatch"><div style="padding:12px 16px 0;">
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=dispatch-flow'"><div class="kb-item__icon" style="background:#e6f4ff;">📋</div><div class="kb-item__info"><div class="kb-item__name">应急调度标准流程</div><div class="kb-item__desc">从接警到结案的完整调度操作规范</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=triage'"><div class="kb-item__icon" style="background:#fff1f0;">🚨</div><div class="kb-item__info"><div class="kb-item__name">紧急程度分级标准</div><div class="kb-item__desc">如何快速判断应急事件的紧急等级</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=ambulance'"><div class="kb-item__icon" style="background:#fff7e6;">🚑</div><div class="kb-item__info"><div class="kb-item__name">救护车调度规范</div><div class="kb-item__desc">救护车派遣条件、路线规划与交接流程</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=handover'"><div class="kb-item__icon" style="background:#f6ffed;">🔄</div><div class="kb-item__info"><div class="kb-item__name">交接班操作指南</div><div class="kb-item__desc">值班交接的标准流程与注意事项</div></div></div>
|
||||
</div><div style="height:16px;"></div></div>
|
||||
<div id="kb-first-aid" style="display:none;"><div style="padding:12px 16px 0;">
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=cpr'"><div class="kb-item__icon" style="background:#fff1f0;">❤️</div><div class="kb-item__info"><div class="kb-item__name">心肺复苏（CPR）指导要点</div><div class="kb-item__desc">电话指导现场人员进行CPR的话术与步骤</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=chest-pain'"><div class="kb-item__icon" style="background:#fff7e6;">🫀</div><div class="kb-item__info"><div class="kb-item__name">胸痛应急处置流程</div><div class="kb-item__desc">胸痛患者的快速评估与调度决策</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=trauma'"><div class="kb-item__icon" style="background:#e6f4ff;">🩹</div><div class="kb-item__info"><div class="kb-item__name">创伤急救电话指导</div><div class="kb-item__desc">骨折、出血等创伤的远程指导要点</div></div></div>
|
||||
</div><div style="height:16px;"></div></div>
|
||||
<div id="kb-comm" style="display:none;"><div style="padding:12px 16px 0;">
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=calm-caller'"><div class="kb-item__icon" style="background:#f6ffed;">🗣️</div><div class="kb-item__info"><div class="kb-item__name">安抚求助者情绪技巧</div><div class="kb-item__desc">如何在电话中稳定求助者情绪获取关键信息</div></div></div>
|
||||
<div class="kb-item" onclick="location.href='./article-detail.html?key=multi-party'"><div class="kb-item__icon" style="background:#e6f4ff;">👥</div><div class="kb-item__info"><div class="kb-item__name">多方协调沟通规范</div><div class="kb-item__desc">操作人员与专业人员、驻场人员的协作沟通</div></div></div>
|
||||
</div><div style="height:16px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 规章制度面板 -->
|
||||
<div id="panel-rule" style="display:none;flex:1;overflow-y:auto;background:#f7f8fa;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">应急调度管理办法（2026版）</div><div class="pdf-item__meta"><span>PDF · 2.1MB</span><span>2026-01-10</span></div></div></div>
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">应急救护操作规范</div><div class="pdf-item__meta"><span>PDF · 3.1MB</span><span>2025-09-15</span></div></div></div>
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">大病就医审批流程细则</div><div class="pdf-item__meta"><span>PDF · 1.5MB</span><span>2025-11-20</span></div></div></div>
|
||||
<div class="pdf-item"><div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div><div style="flex:1;"><div class="pdf-item__name">值班排班管理制度</div><div class="pdf-item__meta"><span>PDF · 0.8MB</span><span>2025-10-05</span></div></div></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="location.href='../workbench/index.html'"><span class="tab-icon">📡</span><span class="tab-label">工作台</span><span class="tab-badge">3</span></div>
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
function switchTopTab(el, panelId) {
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
var dm = { 'panel-article': 'flex', 'panel-rule': 'block' };
|
||||
['panel-article','panel-rule'].forEach(function(id) { var p = document.getElementById(id); if(p) p.style.display = id === panelId ? dm[id] : 'none'; });
|
||||
}
|
||||
function switchKbTab(el, panelId) {
|
||||
el.closest('.sub-tabs').querySelectorAll('.sub-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
['kb-dispatch','kb-first-aid','kb-comm'].forEach(function(id) { var p = document.getElementById(id); if(p) p.style.display = id === panelId ? 'block' : 'none'; });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.btn-primary { background: #1677ff; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">修改密码</span>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">当前密码</span>
|
||||
<input type="password" placeholder="请输入当前密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">新密码</span>
|
||||
<input type="password" placeholder="请输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">确认新密码</span>
|
||||
<input type="password" placeholder="再次输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="openModal('modal-pwd-saved')" class="btn-primary">保存修改</button>
|
||||
</div>
|
||||
<div id="modal-pwd-saved" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">修改成功</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">密码已更新，下次登录请使用新密码。</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-pwd-saved');location.href='./index.html'" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#1677ff;font-weight:600;">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,259 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; position: relative; flex-shrink: 0; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.week-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.week-header__label { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.week-header__nav { display: flex; gap: 8px; }
|
||||
.week-header__btn { width: 32px; height: 32px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; color: #666; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
|
||||
.day-card { background: #fff; border-radius: 12px; margin: 10px 16px 0; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.day-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.day-card__date { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.day-card__today { font-size: 11px; color: #1677ff; background: #e6f4ff; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
|
||||
.day-card__row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
|
||||
.day-card__row:last-child { margin-bottom: 0; }
|
||||
.day-card__role { font-size: 12px; color: #999; width: 56px; flex-shrink: 0; padding-top: 7px; }
|
||||
.day-card__select-wrap { flex: 1; position: relative; }
|
||||
.day-card__select { width: 100%; min-height: 34px; background: #f7f8fa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 6px 28px 6px 10px; font-size: 13px; color: #1a1a1a; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
|
||||
.day-card__select::after { content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #999; pointer-events: none; }
|
||||
.day-card__select-wrap::after { content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #999; pointer-events: none; }
|
||||
.tag { display: inline-flex; align-items: center; gap: 3px; background: #e6f4ff; color: #1677ff; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
|
||||
.tag--green { background: #f6ffed; color: #52c41a; }
|
||||
.tag__close { cursor: pointer; font-size: 13px; line-height: 1; margin-left: 2px; }
|
||||
.placeholder-text { color: #bbb; font-size: 13px; }
|
||||
.dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 20; margin-top: 4px; max-height: 160px; overflow-y: auto; display: none; }
|
||||
.dropdown.show { display: block; }
|
||||
.dropdown__item { padding: 10px 12px; font-size: 13px; color: #1a1a1a; cursor: pointer; display: flex; align-items: center; gap: 8px; }
|
||||
.dropdown__item:hover { background: #f5f5f5; }
|
||||
.dropdown__check { width: 16px; height: 16px; border: 1.5px solid #d9d9d9; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; flex-shrink: 0; }
|
||||
.dropdown__check.checked { background: #1677ff; border-color: #1677ff; }
|
||||
.toast { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 300; }
|
||||
.toast.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./duty-schedule.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">排班配置</span>
|
||||
</div>
|
||||
<div class="week-header">
|
||||
<button class="week-header__btn" onclick="changeWeek(-1)">‹</button>
|
||||
<span class="week-header__label" id="weekLabel"></span>
|
||||
<button class="week-header__btn" onclick="changeWeek(1)">›</button>
|
||||
</div>
|
||||
<div style="padding:8px 16px 0;background:#f7f8fa;flex-shrink:0;">
|
||||
<button onclick="copyLastWeek()" style="display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #d9d9d9;border-radius:8px;padding:6px 14px;font-size:13px;color:#666;cursor:pointer;">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 012 9.5v-7A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5V5"/></svg>
|
||||
复制上周排班
|
||||
</button>
|
||||
</div>
|
||||
<div class="scroll-content" id="dayList"></div>
|
||||
<div style="padding:12px 16px 20px;background:#f7f8fa;flex-shrink:0;">
|
||||
<button onclick="handleSave()" style="width:100%;height:44px;background:#1677ff;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;">保存</button>
|
||||
</div>
|
||||
<div id="toast" class="toast">保存成功</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole','operator');
|
||||
|
||||
var PROFESSIONALS = ['刘旭','张旭','李明'];
|
||||
var OPERATORS = ['王昊','赵强','陈磊'];
|
||||
var WEEKDAYS = ['周一','周二','周三','周四','周五','周六','周日'];
|
||||
|
||||
// 模拟今天 2026-04-24（周五）
|
||||
var TODAY = new Date(2026, 3, 24);
|
||||
var weekOffset = 0;
|
||||
var scheduleData = {};
|
||||
|
||||
function getMonday(date) {
|
||||
var d = new Date(date);
|
||||
var day = d.getDay();
|
||||
var diff = day === 0 ? -6 : 1 - day;
|
||||
d.setDate(d.getDate() + diff);
|
||||
d.setHours(0,0,0,0);
|
||||
return d;
|
||||
}
|
||||
|
||||
function initDefaultData() {
|
||||
var dutyDays = [1,2,3,7,8,9,10,14,15,16,17,21,22,23,24,28,29,30];
|
||||
for (var i = 0; i < dutyDays.length; i++) {
|
||||
var key = '2026-4-' + dutyDays[i];
|
||||
scheduleData[key] = { pro: ['刘旭'], op: ['王昊'] };
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(d) {
|
||||
return (d.getMonth()+1) + '月' + d.getDate() + '日';
|
||||
}
|
||||
|
||||
function dateKey(d) {
|
||||
return d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate();
|
||||
}
|
||||
|
||||
function copyLastWeek() {
|
||||
var monday = getMonday(TODAY);
|
||||
monday.setDate(monday.getDate() + weekOffset * 7);
|
||||
var lastMonday = new Date(monday);
|
||||
lastMonday.setDate(lastMonday.getDate() - 7);
|
||||
var hasCopied = false;
|
||||
for (var i = 0; i < 7; i++) {
|
||||
var lastDay = new Date(lastMonday);
|
||||
lastDay.setDate(lastDay.getDate() + i);
|
||||
var curDay = new Date(monday);
|
||||
curDay.setDate(curDay.getDate() + i);
|
||||
var lastKey = dateKey(lastDay);
|
||||
var curKey = dateKey(curDay);
|
||||
var src = scheduleData[lastKey];
|
||||
if (src) {
|
||||
scheduleData[curKey] = { pro: src.pro.slice(), op: src.op.slice() };
|
||||
hasCopied = true;
|
||||
}
|
||||
}
|
||||
if (hasCopied) { showToast('已复制上周排班'); renderWeek(); }
|
||||
else { showToast('上周暂无排班数据'); }
|
||||
}
|
||||
|
||||
function changeWeek(dir) {
|
||||
weekOffset += dir;
|
||||
renderWeek();
|
||||
}
|
||||
function renderWeek() {
|
||||
var monday = getMonday(TODAY);
|
||||
monday.setDate(monday.getDate() + weekOffset * 7);
|
||||
var sunday = new Date(monday);
|
||||
sunday.setDate(sunday.getDate() + 6);
|
||||
document.getElementById('weekLabel').textContent = formatDate(monday) + ' - ' + formatDate(sunday);
|
||||
|
||||
var list = document.getElementById('dayList');
|
||||
list.innerHTML = '';
|
||||
for (var i = 0; i < 7; i++) {
|
||||
var cur = new Date(monday);
|
||||
cur.setDate(cur.getDate() + i);
|
||||
var key = dateKey(cur);
|
||||
var isToday = cur.getTime() === TODAY.getTime();
|
||||
var data = scheduleData[key] || { pro: [], op: [] };
|
||||
|
||||
var card = document.createElement('div');
|
||||
card.className = 'day-card';
|
||||
card.innerHTML = '<div class="day-card__head"><span class="day-card__date">' + WEEKDAYS[i] + ' ' + (cur.getMonth()+1) + '/' + cur.getDate() + '</span>' + (isToday ? '<span class="day-card__today">今天</span>' : '') + '</div>' +
|
||||
'<div class="day-card__row"><span class="day-card__role">专业人员</span><div class="day-card__select-wrap" id="pro-wrap-'+i+'"><div class="day-card__select" onclick="toggleDrop(\'pro-drop-'+i+'\')"></div><div class="dropdown" id="pro-drop-'+i+'"></div></div></div>' +
|
||||
'<div class="day-card__row"><span class="day-card__role">操作人员</span><div class="day-card__select-wrap" id="op-wrap-'+i+'"><div class="day-card__select" onclick="toggleDrop(\'op-drop-'+i+'\')"></div><div class="dropdown" id="op-drop-'+i+'"></div></div></div>';
|
||||
list.appendChild(card);
|
||||
|
||||
buildDropdown('pro-drop-'+i, PROFESSIONALS, data.pro, key, 'pro', i);
|
||||
buildDropdown('op-drop-'+i, OPERATORS, data.op, key, 'op', i);
|
||||
renderTags(i, key);
|
||||
}
|
||||
var spacer = document.createElement('div');
|
||||
spacer.style.height = '12px';
|
||||
list.appendChild(spacer);
|
||||
}
|
||||
|
||||
function buildDropdown(dropId, options, selected, key, type, dayIdx) {
|
||||
var drop = document.getElementById(dropId);
|
||||
drop.innerHTML = '';
|
||||
for (var j = 0; j < options.length; j++) {
|
||||
var name = options[j];
|
||||
var checked = selected.indexOf(name) > -1;
|
||||
var item = document.createElement('div');
|
||||
item.className = 'dropdown__item';
|
||||
item.setAttribute('data-name', name);
|
||||
item.setAttribute('data-key', key);
|
||||
item.setAttribute('data-type', type);
|
||||
item.setAttribute('data-idx', dayIdx);
|
||||
item.innerHTML = '<span class="dropdown__check' + (checked ? ' checked' : '') + '">' + (checked ? '✓' : '') + '</span><span>' + name + '</span>';
|
||||
item.onclick = function() { toggleSelect(this); };
|
||||
drop.appendChild(item);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDrop(id) {
|
||||
var allDrops = document.querySelectorAll('.dropdown');
|
||||
for (var i = 0; i < allDrops.length; i++) {
|
||||
if (allDrops[i].id !== id) allDrops[i].classList.remove('show');
|
||||
}
|
||||
document.getElementById(id).classList.toggle('show');
|
||||
}
|
||||
function toggleSelect(el) {
|
||||
var name = el.getAttribute('data-name');
|
||||
var key = el.getAttribute('data-key');
|
||||
var type = el.getAttribute('data-type');
|
||||
var idx = parseInt(el.getAttribute('data-idx'));
|
||||
if (!scheduleData[key]) scheduleData[key] = { pro: [], op: [] };
|
||||
var arr = scheduleData[key][type];
|
||||
var pos = arr.indexOf(name);
|
||||
if (pos > -1) arr.splice(pos, 1); else arr.push(name);
|
||||
var check = el.querySelector('.dropdown__check');
|
||||
if (pos > -1) { check.classList.remove('checked'); check.textContent = ''; }
|
||||
else { check.classList.add('checked'); check.textContent = '✓'; }
|
||||
renderTags(idx, key);
|
||||
}
|
||||
|
||||
function renderTags(dayIdx, key) {
|
||||
var data = scheduleData[key] || { pro: [], op: [] };
|
||||
var proSelect = document.querySelector('#pro-wrap-'+dayIdx+' .day-card__select');
|
||||
var opSelect = document.querySelector('#op-wrap-'+dayIdx+' .day-card__select');
|
||||
proSelect.innerHTML = data.pro.length ? data.pro.map(function(n){ return '<span class="tag tag--green">'+n+'<span class="tag__close" onclick="event.stopPropagation();removePerson(\''+key+'\',\'pro\',\''+n+'\','+dayIdx+')">×</span></span>'; }).join('') : '<span class="placeholder-text">请选择专业人员</span>';
|
||||
opSelect.innerHTML = data.op.length ? data.op.map(function(n){ return '<span class="tag">'+n+'<span class="tag__close" onclick="event.stopPropagation();removePerson(\''+key+'\',\'op\',\''+n+'\','+dayIdx+')">×</span></span>'; }).join('') : '<span class="placeholder-text">请选择操作人员</span>';
|
||||
}
|
||||
|
||||
function removePerson(key, type, name, dayIdx) {
|
||||
var arr = scheduleData[key][type];
|
||||
var pos = arr.indexOf(name);
|
||||
if (pos > -1) arr.splice(pos, 1);
|
||||
renderTags(dayIdx, key);
|
||||
var dropId = type === 'pro' ? 'pro-drop-'+dayIdx : 'op-drop-'+dayIdx;
|
||||
var items = document.getElementById(dropId).querySelectorAll('.dropdown__item');
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
if (items[i].getAttribute('data-name') === name) {
|
||||
var c = items[i].querySelector('.dropdown__check');
|
||||
c.classList.remove('checked'); c.textContent = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
showToast('保存成功');
|
||||
setTimeout(function(){ location.href='./duty-schedule.html'; }, 1200);
|
||||
}
|
||||
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('active');
|
||||
setTimeout(function(){ t.classList.remove('active'); }, 1500);
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.day-card__select-wrap')) {
|
||||
var allDrops = document.querySelectorAll('.dropdown');
|
||||
for (var i = 0; i < allDrops.length; i++) allDrops[i].classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
initDefaultData();
|
||||
renderWeek();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; position: relative; flex-shrink: 0; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.duty-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: linear-gradient(135deg,#e6f4ff,#f0f5ff); margin-bottom: 12px; }
|
||||
.duty-summary__main { font-size: 14px; font-weight: 600; color: #1677ff; }
|
||||
.duty-summary__tag { padding: 4px 10px; border-radius: 999px; background: #1677ff; color: #fff; font-size: 11px; font-weight: 600; }
|
||||
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.cal-header__month { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.cal-header__nav { display: flex; gap: 6px; }
|
||||
.cal-header__btn { width: 28px; height: 28px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; color: #666; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-week { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: 11px; color: #999; margin-bottom: 4px; }
|
||||
.cal-week span { padding: 4px 0; }
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
|
||||
.cal-day { min-height: 42px; border-radius: 10px; background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: #1a1a1a; position: relative; }
|
||||
.cal-day--other { color: #bbb; background: transparent; }
|
||||
.cal-day--today { background: #1677ff; color: #fff; font-weight: 700; }
|
||||
.cal-day--duty { border: 1px solid #91caff; background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.cal-day--today.cal-day--duty { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: #1677ff; margin-top: 3px; }
|
||||
.cal-day--today .cal-dot { background: #fff; }
|
||||
.legend { display: flex; gap: 14px; align-items: center; margin-top: 12px; font-size: 11px; color: #666; }
|
||||
.legend-item { display: flex; align-items: center; gap: 5px; }
|
||||
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.legend-dot--today { background: #1677ff; }
|
||||
.legend-dot--duty { background: #91caff; }
|
||||
.duty-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.duty-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: #fafafa; }
|
||||
.duty-item__avatar { width: 38px; height: 38px; border-radius: 50%; background: #e6f4ff; color: #1677ff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
|
||||
.duty-item__info { flex: 1; min-width: 0; }
|
||||
.duty-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.duty-item__role { font-size: 11px; color: #999; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">值班信息</span>
|
||||
<!-- [交互] 点击跳转至: ./duty-config.html -->
|
||||
<button onclick="location.href='./duty-config.html'" style="position:absolute;right:16px;background:none;border:none;color:#1677ff;font-size:14px;font-weight:600;cursor:pointer;">修改</button>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="card">
|
||||
<div class="card-title">值班日历</div>
|
||||
<div class="duty-summary">
|
||||
<div>
|
||||
<div class="duty-summary__main">西安应急中心</div>
|
||||
</div>
|
||||
<span class="duty-summary__tag">今日当班</span>
|
||||
</div>
|
||||
<div class="cal-header">
|
||||
<span class="cal-header__month" id="calMonth"></span>
|
||||
<div class="cal-header__nav">
|
||||
<button class="cal-header__btn" onclick="changeMonth(-1)">‹</button>
|
||||
<button class="cal-header__btn" onclick="changeMonth(1)">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-week"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
|
||||
<div class="cal-grid" id="calGrid"></div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><span class="legend-dot legend-dot--today"></span><span>今天</span></div>
|
||||
<div class="legend-item"><span class="legend-dot legend-dot--duty"></span><span>排班日</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">今日值班人员</div>
|
||||
<div class="duty-list">
|
||||
<div class="duty-item">
|
||||
<div class="duty-item__avatar">王</div>
|
||||
<div class="duty-item__info">
|
||||
<div class="duty-item__name">王昊</div>
|
||||
</div>
|
||||
<div class="duty-item__role">操作人员</div>
|
||||
</div>
|
||||
<div class="duty-item">
|
||||
<div class="duty-item__avatar">刘</div>
|
||||
<div class="duty-item__info">
|
||||
<div class="duty-item__name">刘旭·主治医师</div>
|
||||
</div>
|
||||
<div class="duty-item__role">专业人员</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole','operator');
|
||||
|
||||
var _calYear, _calMonth;
|
||||
var _dutyDays = {
|
||||
2026: {
|
||||
4: [1,2,3,7,8,9,10,14,15,16,17,21,22,23,24,28,29,30],
|
||||
5: [6,7,8,11,12,13,14,18,19,20,21,25,26,27,28],
|
||||
6: [1,2,3,4,8,9,10,11,15,16,17,18,22,23,24,25,29,30]
|
||||
}
|
||||
};
|
||||
|
||||
function initCalendar() {
|
||||
var d = new Date(2026, 3, 24);
|
||||
_calYear = d.getFullYear();
|
||||
_calMonth = d.getMonth() + 1;
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
function changeMonth(dir) {
|
||||
_calMonth += dir;
|
||||
if (_calMonth < 1) { _calMonth = 12; _calYear--; }
|
||||
if (_calMonth > 12) { _calMonth = 1; _calYear++; }
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
document.getElementById('calMonth').textContent = _calYear + '年' + _calMonth + '月';
|
||||
var grid = document.getElementById('calGrid');
|
||||
grid.innerHTML = '';
|
||||
var firstDay = new Date(_calYear, _calMonth - 1, 1).getDay();
|
||||
var daysInMonth = new Date(_calYear, _calMonth, 0).getDate();
|
||||
var prevDays = new Date(_calYear, _calMonth - 1, 0).getDate();
|
||||
var todayYear = 2026, todayMonth = 4, todayDate = 24;
|
||||
var duties = (_dutyDays[_calYear] && _dutyDays[_calYear][_calMonth]) || [];
|
||||
|
||||
for (var i = firstDay - 1; i >= 0; i--) {
|
||||
var prevEl = document.createElement('div');
|
||||
prevEl.className = 'cal-day cal-day--other';
|
||||
prevEl.textContent = prevDays - i;
|
||||
grid.appendChild(prevEl);
|
||||
}
|
||||
for (var d = 1; d <= daysInMonth; d++) {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'cal-day';
|
||||
var isToday = _calYear === todayYear && _calMonth === todayMonth && d === todayDate;
|
||||
var isDuty = duties.indexOf(d) > -1;
|
||||
if (isToday) el.className += ' cal-day--today';
|
||||
if (isDuty) el.className += ' cal-day--duty';
|
||||
el.innerHTML = '<span>' + d + '</span>';
|
||||
if (isDuty) { var dot = document.createElement('span'); dot.className = 'cal-dot'; el.appendChild(dot); }
|
||||
grid.appendChild(el);
|
||||
}
|
||||
var total = firstDay + daysInMonth;
|
||||
var remain = total % 7 === 0 ? 0 : 7 - total % 7;
|
||||
for (var j = 1; j <= remain; j++) {
|
||||
var nextEl = document.createElement('div');
|
||||
nextEl.className = 'cal-day cal-day--other';
|
||||
nextEl.textContent = j;
|
||||
grid.appendChild(nextEl);
|
||||
}
|
||||
}
|
||||
|
||||
initCalendar();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; text-decoration: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.avatar-section { display: flex; flex-direction: column; align-items: center; padding: 32px 0 24px; background: #fff; }
|
||||
.avatar-wrap { position: relative; cursor: pointer; }
|
||||
.avatar-img { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #e6f4ff, #91caff); display: flex; align-items: center; justify-content: center; font-size: 40px; border: 3px solid #f0f0f0; }
|
||||
.avatar-badge { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; background: #1677ff; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
|
||||
.avatar-hint { font-size: 13px; color: #999; margin-top: 10px; }
|
||||
.form-group { background: #fff; margin: 12px 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.form-row { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f5f5f5; }
|
||||
.form-row:last-child { border-bottom: none; }
|
||||
.form-label { font-size: 15px; color: #1a1a1a; width: 72px; flex-shrink: 0; }
|
||||
.form-input { flex: 1; font-size: 15px; color: #1a1a1a; border: none; outline: none; background: transparent; text-align: right; }
|
||||
.form-input::placeholder { color: #ccc; }
|
||||
.bottom-action { padding: 16px; flex-shrink: 0; background: #f7f8fa; }
|
||||
.btn-save { width: 100%; padding: 14px; background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
.action-sheet-mask { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
|
||||
.action-sheet-mask.active { display: block; }
|
||||
.action-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding-bottom: 20px; z-index: 201; transform: translateY(100%); transition: transform 0.3s ease; }
|
||||
.action-sheet-mask.active .action-sheet { transform: translateY(0); }
|
||||
.action-sheet-item { padding: 16px; text-align: center; font-size: 16px; color: #1a1a1a; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.action-sheet-item:active { background: #f5f5f5; }
|
||||
.action-sheet-cancel { padding: 16px; text-align: center; font-size: 16px; color: #999; cursor: pointer; margin-top: 8px; background: #f7f8fa; }
|
||||
.toast { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 300; }
|
||||
.toast.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a href="./index.html" class="back-btn">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</a>
|
||||
<span class="nav-title">修改个人信息</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-wrap" onclick="openSheet()">
|
||||
<div class="avatar-img" id="avatarDisplay">📡</div>
|
||||
<div class="avatar-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#fff" stroke-width="1.5"><path d="M7 3v8M3 7h8"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar-hint">点击更换头像</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-row">
|
||||
<span class="form-label">姓名</span>
|
||||
<input class="form-input" id="inputName" type="text" value="王昊" placeholder="请输入姓名" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-action">
|
||||
<button class="btn-save" onclick="handleSave()">保存</button>
|
||||
</div>
|
||||
<div id="avatarSheet" class="action-sheet-mask" onclick="closeSheet(event)">
|
||||
<div class="action-sheet">
|
||||
<div class="action-sheet-item" onclick="pickAvatar('camera')">拍照</div>
|
||||
<div class="action-sheet-item" onclick="pickAvatar('album')">从相册选择</div>
|
||||
<div class="action-sheet-cancel" onclick="closeSheet()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toast" class="toast">保存成功</div>
|
||||
</div>
|
||||
<script>
|
||||
function openSheet() {
|
||||
document.getElementById('avatarSheet').classList.add('active');
|
||||
}
|
||||
function closeSheet(e) {
|
||||
if (!e || e.target.id === 'avatarSheet' || e.target.closest('.action-sheet-cancel')) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
}
|
||||
}
|
||||
function pickAvatar(source) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
showToast('已选择：' + (source === 'camera' ? '拍照' : '从相册选择'));
|
||||
}
|
||||
function handleSave() {
|
||||
var name = document.getElementById('inputName').value.trim();
|
||||
if (!name) { showToast('请输入姓名'); return; }
|
||||
showToast('保存成功');
|
||||
}
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('active');
|
||||
setTimeout(function() { t.classList.remove('active'); }, 1500);
|
||||
}
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #fff; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.menu-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.menu-item { display: flex; align-items: center; padding: 16px; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.logout-btn { width: 100%; height: 48px; border: none; border-radius: 12px; background: #fff1f0; color: #ff4d4f; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:60px 20px 24px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<div style="width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#e6f4ff,#91caff);display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid rgba(255,255,255,0.5);">📡</div>
|
||||
<div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">王昊</div>
|
||||
<div style="color:rgba(255,255,255,0.8);font-size:13px;margin-top:3px;">操作人员</div>
|
||||
<div style="color:rgba(255,255,255,0.78);font-size:12px;margin-top:4px;">所属应急中心：西安应急中心</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<div class="menu-card">
|
||||
<div class="menu-item" onclick="location.href='./duty-schedule.html'"><span style="font-size:18px;margin-right:12px;">📅</span><span style="font-size:15px;color:#1a1a1a;flex:1;">值班信息</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div class="menu-item" onclick="location.href='./edit-profile.html'"><span style="font-size:18px;margin-right:12px;">📝</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改个人信息</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div class="menu-item" onclick="location.href='./change-pwd.html'"><span style="font-size:18px;margin-right:12px;">🔒</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改密码</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div style="display:flex;align-items:center;padding:16px;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">ℹ️</span><span style="font-size:15px;color:#1a1a1a;flex:1;">关于我们</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;">
|
||||
<button class="logout-btn" onclick="openModal('modal-logout')">退出登录</button>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<div id="modal-logout" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">退出登录</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">确认退出当前账号？</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#ff4d4f;font-weight:600;">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="location.href='../workbench/index.html'"><span class="tab-icon">📡</span><span class="tab-label">工作台</span><span class="tab-badge">3</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,269 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.form-section { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.form-section__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
|
||||
.form-section__title::before { content: ''; width: 3px; height: 16px; background: #fa8c16; border-radius: 2px; }
|
||||
.form-field { margin-bottom: 16px; }
|
||||
.form-field:last-child { margin-bottom: 0; }
|
||||
.form-label { font-size: 13px; color: #333; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
|
||||
.form-label .required { color: #ff4d4f; }
|
||||
.form-input { width: 100%; height: 40px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 12px; font-size: 14px; outline: none; color: #1a1a1a; background: #fff; }
|
||||
.form-input:focus { border-color: #fa8c16; }
|
||||
.form-textarea { width: 100%; min-height: 88px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; resize: vertical; font-family: inherit; line-height: 1.6; color: #1a1a1a; }
|
||||
.form-textarea:focus { border-color: #fa8c16; }
|
||||
.amb-select { position: relative; }
|
||||
.amb-select__input-wrap { position: relative; }
|
||||
.amb-select__input { width: 100%; height: 40px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 38px 0 12px; font-size: 14px; outline: none; color: #1a1a1a; background: #fff; }
|
||||
.amb-select__input:focus { border-color: #fa8c16; }
|
||||
.amb-select__input::placeholder { color: #999; }
|
||||
.amb-select__arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; transition: transform .2s; }
|
||||
.amb-select.open .amb-select__arrow { transform: translateY(-50%) rotate(180deg); }
|
||||
.amb-select__dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); overflow: hidden; z-index: 20; }
|
||||
.amb-select.open .amb-select__dropdown { display: block; }
|
||||
.amb-select__tip { margin-top: 6px; font-size: 12px; color: #999; line-height: 1.5; }
|
||||
.amb-options { max-height: 224px; overflow-y: auto; }
|
||||
.amb-options::-webkit-scrollbar { width: 4px; }
|
||||
.amb-options::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); border-radius: 999px; }
|
||||
.amb-option { padding: 12px; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: background .15s; }
|
||||
.amb-option:last-child { border-bottom: none; }
|
||||
.amb-option:hover { background: #fffaf0; }
|
||||
.amb-option.selected { background: #fff7e6; }
|
||||
.amb-option.is-hidden { display: none; }
|
||||
.amb-option__plate { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.amb-option__meta { margin-top: 4px; font-size: 12px; color: #666; line-height: 1.6; }
|
||||
.amb-empty { display: none; padding: 18px 12px; text-align: center; font-size: 13px; color: #999; background: #fafafa; }
|
||||
.amb-empty.show { display: block; }
|
||||
.ambulance-info { background: #fafafa; border: 1px solid #f0f0f0; border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
|
||||
.ambulance-info__title { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.ambulance-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
|
||||
.ambulance-row:last-child { margin-bottom: 0; }
|
||||
.ambulance-row__label { color: #999; flex-shrink: 0; min-width: 70px; }
|
||||
.ambulance-row__value { color: #1a1a1a; font-weight: 500; }
|
||||
.ambulance-row__value a { color: #1677ff; text-decoration: none; }
|
||||
.bottom-bar { padding: 12px 16px 28px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.btn-submit { width: 100%; height: 44px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; border: none; background: #fa8c16; color: #fff; transition: background .2s; }
|
||||
.btn-submit:hover { background: #ffa940; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">救护车支援</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<div style="background:#fff7e6;margin:0;padding:10px 16px;border-bottom:1px solid #ffe7ba;font-size:12px;color:#666;">
|
||||
当前应急：<span style="font-weight:600;color:#1a1a1a;">陈伟</span> · 男 · 47岁 · 采油三厂第二作业区
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">选择救护车</div>
|
||||
<div class="form-field" style="margin-bottom: 0;">
|
||||
<div class="form-label"><span class="required">*</span>救护车</div>
|
||||
<div id="amb-select" class="amb-select">
|
||||
<div class="amb-select__input-wrap">
|
||||
<input id="amb-search" class="amb-select__input" type="text" placeholder="请输入医疗点或所在医院搜索" autocomplete="off" onclick="openAmbulanceDropdown()" onfocus="handleSearchFocus()" oninput="filterAmbulances()" />
|
||||
<span class="amb-select__arrow">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4.5L6 8l4-3.5"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="amb-select__tip">支持按所在医疗点或所在医院搜索，选中后输入框显示车牌号。</div>
|
||||
<div class="amb-select__dropdown" id="amb-dropdown">
|
||||
<div class="amb-options" id="amb-options">
|
||||
<div class="amb-option selected" onclick="selectAmb(this)" data-plate="陕A·120E1" data-point="第二作业区医疗点" data-hospital="长庆油田职工医院" data-driver="王大力" data-phone="138-0000-1111">
|
||||
<div class="amb-option__plate">陕A·120E1</div>
|
||||
<div class="amb-option__meta">所在医疗点：第二作业区医疗点<br>所在医院：长庆油田职工医院</div>
|
||||
</div>
|
||||
<div class="amb-option" onclick="selectAmb(this)" data-plate="陕A·120E2" data-point="第三作业区医疗点" data-hospital="宝石花医院" data-driver="赵刚" data-phone="138-2210-8899">
|
||||
<div class="amb-option__plate">陕A·120E2</div>
|
||||
<div class="amb-option__meta">所在医疗点：第三作业区医疗点<br>所在医院：宝石花医院</div>
|
||||
</div>
|
||||
<div class="amb-option" onclick="selectAmb(this)" data-plate="陕A·120E5" data-point="联合站医疗点" data-hospital="西安急救中心" data-driver="李海峰" data-phone="138-6655-2008">
|
||||
<div class="amb-option__plate">陕A·120E5</div>
|
||||
<div class="amb-option__meta">所在医疗点：联合站医疗点<br>所在医院：西安急救中心</div>
|
||||
</div>
|
||||
<div class="amb-option" onclick="selectAmb(this)" data-plate="甘M·120A3" data-point="华池驻点医疗点" data-hospital="华池县人民医院" data-driver="孙建国" data-phone="139-9021-3318">
|
||||
<div class="amb-option__plate">甘M·120A3</div>
|
||||
<div class="amb-option__meta">所在医疗点：华池驻点医疗点<br>所在医院：华池县人民医院</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="amb-empty" class="amb-empty">未搜索到匹配的救护车</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ambulance-info" id="ambulance-info">
|
||||
<div class="ambulance-info__title">救护车信息</div>
|
||||
<div class="ambulance-row">
|
||||
<span class="ambulance-row__label">所在医疗点</span>
|
||||
<span id="amb-point" class="ambulance-row__value">第二作业区医疗点</span>
|
||||
</div>
|
||||
<div class="ambulance-row">
|
||||
<span class="ambulance-row__label">所在医院</span>
|
||||
<span id="amb-hospital" class="ambulance-row__value">长庆油田职工医院</span>
|
||||
</div>
|
||||
<div class="ambulance-row">
|
||||
<span class="ambulance-row__label">驾驶员</span>
|
||||
<span id="amb-driver" class="ambulance-row__value">王大力</span>
|
||||
</div>
|
||||
<div class="ambulance-row">
|
||||
<span class="ambulance-row__label">驾驶员电话</span>
|
||||
<span id="amb-phone" class="ambulance-row__value"><a href="tel:13800001111">138-0000-1111</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">行程信息</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label">随行人</div>
|
||||
<input id="escort-name-input" class="form-input" type="text" placeholder="请输入随行人姓名" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label">随行人电话</div>
|
||||
<input id="escort-phone-input" class="form-input" type="tel" placeholder="请输入随行人联系电话" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label"><span class="required">*</span>目的地</div>
|
||||
<input id="destination-input" class="form-input" type="text" value="采油三厂第二作业区值班室" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label">备注信息</div>
|
||||
<textarea id="remark-input" class="form-textarea" placeholder="请输入备注信息...">患者疑似心绞痛，请携带心电监护设备并优先出车。</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-bar">
|
||||
<button class="btn-submit" onclick="confirmDispatch()">确认填写</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
function getSelectedAmbulance() {
|
||||
return document.querySelector('.amb-option.selected');
|
||||
}
|
||||
|
||||
function openAmbulanceDropdown() {
|
||||
document.getElementById('amb-select').classList.add('open');
|
||||
}
|
||||
|
||||
function closeAmbulanceDropdown() {
|
||||
document.getElementById('amb-select').classList.remove('open');
|
||||
}
|
||||
|
||||
function handleSearchFocus() {
|
||||
openAmbulanceDropdown();
|
||||
var input = document.getElementById('amb-search');
|
||||
var selected = getSelectedAmbulance();
|
||||
if (selected && input.value === selected.getAttribute('data-plate')) {
|
||||
input.value = '';
|
||||
filterAmbulances();
|
||||
}
|
||||
}
|
||||
|
||||
function selectAmb(el) {
|
||||
document.querySelectorAll('.amb-option').forEach(function(item) {
|
||||
item.classList.remove('selected');
|
||||
});
|
||||
el.classList.add('selected');
|
||||
updateAmbulanceInfo(el);
|
||||
document.getElementById('amb-search').value = el.getAttribute('data-plate') || '';
|
||||
filterAmbulances(true);
|
||||
closeAmbulanceDropdown();
|
||||
}
|
||||
|
||||
function updateAmbulanceInfo(item) {
|
||||
var point = item.getAttribute('data-point') || '-';
|
||||
var hospital = item.getAttribute('data-hospital') || '-';
|
||||
var driver = item.getAttribute('data-driver') || '-';
|
||||
var phone = item.getAttribute('data-phone') || '-';
|
||||
|
||||
document.getElementById('amb-point').textContent = point;
|
||||
document.getElementById('amb-hospital').textContent = hospital;
|
||||
document.getElementById('amb-driver').textContent = driver;
|
||||
document.getElementById('amb-phone').innerHTML = phone === '-' ? '-' : '<a href="tel:' + phone.replace(/-/g, '') + '">' + phone + '</a>';
|
||||
}
|
||||
|
||||
function filterAmbulances(skipRestore) {
|
||||
var input = document.getElementById('amb-search');
|
||||
var keyword = input.value.trim().toLowerCase();
|
||||
var items = Array.prototype.slice.call(document.querySelectorAll('.amb-option'));
|
||||
var visibleCount = 0;
|
||||
|
||||
items.forEach(function(item) {
|
||||
var point = (item.getAttribute('data-point') || '').toLowerCase();
|
||||
var hospital = (item.getAttribute('data-hospital') || '').toLowerCase();
|
||||
var matched = !keyword || point.indexOf(keyword) > -1 || hospital.indexOf(keyword) > -1;
|
||||
item.classList.toggle('is-hidden', !matched);
|
||||
if (matched) visibleCount += 1;
|
||||
});
|
||||
|
||||
document.getElementById('amb-empty').classList.toggle('show', visibleCount === 0);
|
||||
|
||||
if (!skipRestore) {
|
||||
openAmbulanceDropdown();
|
||||
}
|
||||
}
|
||||
|
||||
function restoreSelectedPlate() {
|
||||
var selected = getSelectedAmbulance();
|
||||
if (selected) {
|
||||
document.getElementById('amb-search').value = selected.getAttribute('data-plate') || '';
|
||||
}
|
||||
filterAmbulances(true);
|
||||
}
|
||||
|
||||
function confirmDispatch() {
|
||||
var selected = getSelectedAmbulance();
|
||||
var destination = document.getElementById('destination-input').value.trim();
|
||||
if (!selected) { alert('请选择救护车'); return; }
|
||||
if (!destination) { alert('请填写目的地'); return; }
|
||||
alert('已成功呼叫救护车：' + selected.getAttribute('data-plate'));
|
||||
history.back();
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
var select = document.getElementById('amb-select');
|
||||
if (!select.contains(event.target)) {
|
||||
restoreSelectedPlate();
|
||||
closeAmbulanceDropdown();
|
||||
}
|
||||
});
|
||||
|
||||
updateAmbulanceInfo(getSelectedAmbulance());
|
||||
document.getElementById('amb-search').value = getSelectedAmbulance().getAttribute('data-plate');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,320 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.form-section { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.form-section__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
|
||||
.form-section__title::before { content: ''; width: 3px; height: 16px; background: #722ed1; border-radius: 2px; }
|
||||
.form-field { margin-bottom: 16px; }
|
||||
.form-field:last-child { margin-bottom: 0; }
|
||||
.form-label { font-size: 13px; color: #333; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
|
||||
.form-label .required { color: #ff4d4f; }
|
||||
.form-textarea { width: 100%; min-height: 80px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; resize: vertical; font-family: inherit; line-height: 1.6; color: #1a1a1a; }
|
||||
.form-textarea:focus { border-color: #722ed1; }
|
||||
/* 可搜索下拉选择框 */
|
||||
.person-select { position: relative; }
|
||||
.person-select__input-wrap { position: relative; }
|
||||
.person-select__input { width: 100%; height: 40px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 38px 0 12px; font-size: 14px; outline: none; color: #1a1a1a; background: #fff; }
|
||||
.person-select__input:focus { border-color: #722ed1; }
|
||||
.person-select__input::placeholder { color: #999; }
|
||||
.person-select__arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; transition: transform .2s; }
|
||||
.person-select.open .person-select__arrow { transform: translateY(-50%) rotate(180deg); }
|
||||
.person-select__dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); overflow: hidden; z-index: 20; }
|
||||
.person-select.open .person-select__dropdown { display: block; }
|
||||
.person-select__tip { margin-top: 6px; font-size: 12px; color: #999; line-height: 1.5; }
|
||||
.person-options { max-height: 240px; overflow-y: auto; }
|
||||
.person-options::-webkit-scrollbar { width: 4px; }
|
||||
.person-options::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); border-radius: 999px; }
|
||||
.person-option { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: background .15s; }
|
||||
.person-option:last-child { border-bottom: none; }
|
||||
.person-option:hover { background: #faf5ff; }
|
||||
.person-option.selected { background: #f9f0ff; }
|
||||
.person-option.is-hidden { display: none; }
|
||||
.person-option__info { flex: 1; min-width: 0; }
|
||||
.person-option__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.person-option__meta { margin-top: 3px; font-size: 12px; color: #666; line-height: 1.6; }
|
||||
.person-option__status { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; flex-shrink: 0; }
|
||||
.person-option__status--online { background: #f6ffed; color: #52c41a; }
|
||||
.person-option__status--busy { background: #fff7e6; color: #fa8c16; }
|
||||
.person-empty { display: none; padding: 18px 12px; text-align: center; font-size: 13px; color: #999; background: #fafafa; }
|
||||
.person-empty.show { display: block; }
|
||||
/* 驻场人员信息 */
|
||||
.person-info { background: #fafafa; border: 1px solid #f0f0f0; border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
|
||||
.person-info__title { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.person-info__row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
|
||||
.person-info__row:last-child { margin-bottom: 0; }
|
||||
.person-info__label { color: #999; flex-shrink: 0; min-width: 56px; }
|
||||
.person-info__value { color: #1a1a1a; font-weight: 500; }
|
||||
.person-info__value a { color: #1677ff; text-decoration: none; }
|
||||
.status-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.status-tag--online { background: #f6ffed; color: #52c41a; }
|
||||
.status-tag--busy { background: #fff7e6; color: #fa8c16; }
|
||||
.dispatch-result { background: #fff; margin: 12px 16px; border-radius: 16px; padding: 18px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.dispatch-result__title { font-size: 16px; font-weight: 700; color: #1a1a1a; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; margin-bottom: 14px; }
|
||||
.dispatch-result__row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; font-size: 13px; }
|
||||
.dispatch-result__row:last-of-type { margin-bottom: 0; }
|
||||
.dispatch-result__label { width: 72px; flex-shrink: 0; color: #999; line-height: 1.8; }
|
||||
.dispatch-result__value { flex: 1; color: #1a1a1a; line-height: 1.8; white-space: pre-line; }
|
||||
.dispatch-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 600; background: #f6ffed; color: #52c41a; }
|
||||
.is-hidden { display: none !important; }
|
||||
/* 底部按钮 */
|
||||
.bottom-bar { padding: 12px 16px 28px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.btn-submit { width: 100%; height: 44px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; border: none; background: #722ed1; color: #fff; transition: background .2s; }
|
||||
.btn-submit:hover { background: #9254de; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">驻场派单</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 患者信息摘要 -->
|
||||
<div style="background:#fff7e6;margin:0;padding:10px 16px;border-bottom:1px solid #ffe7ba;font-size:12px;color:#666;">
|
||||
当前应急：<span style="font-weight:600;color:#1a1a1a;">陈伟</span> · 男 · 47岁 · 采油三厂第二作业区
|
||||
</div>
|
||||
|
||||
<!-- 选择驻场人员 -->
|
||||
<div id="person-select-section" class="form-section">
|
||||
<div class="form-section__title">选择驻场人员</div>
|
||||
<div class="form-field" style="margin-bottom:0;">
|
||||
<div class="form-label"><span class="required">*</span>驻场人员</div>
|
||||
<div id="person-select" class="person-select">
|
||||
<div class="person-select__input-wrap">
|
||||
<input id="person-search" class="person-select__input" type="text" placeholder="请输入姓名或所在医院搜索" autocomplete="off" onclick="openPersonDropdown()" onfocus="handlePersonFocus()" oninput="filterPersons()" />
|
||||
<span class="person-select__arrow">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4.5L6 8l4-3.5"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="person-select__tip">支持按姓名或所在医院搜索，选中后显示人员姓名。</div>
|
||||
<div class="person-select__dropdown" id="person-dropdown">
|
||||
<div class="person-options" id="person-options">
|
||||
<div class="person-option selected" onclick="selectPerson(this)" data-name="赵强" data-hospital="宝石花医院" data-phone="185-2236-6695" data-status="空闲" data-status-type="online">
|
||||
<div class="person-option__info">
|
||||
<div class="person-option__name">赵强</div>
|
||||
<div class="person-option__meta">所在医院：宝石花医院<br>联系方式：185-2236-6695</div>
|
||||
</div>
|
||||
<span class="person-option__status person-option__status--online">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="孙磊" data-hospital="宝石花医院" data-phone="139-8810-2233" data-status="空闲" data-status-type="online">
|
||||
<div class="person-option__info">
|
||||
<div class="person-option__name">孙磊</div>
|
||||
<div class="person-option__meta">所在医院：宝石花医院<br>联系方式：139-8810-2233</div>
|
||||
</div>
|
||||
<span class="person-option__status person-option__status--online">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="王希" data-hospital="长庆油田职工医院" data-phone="138-9201-3001" data-status="有派单" data-status-type="busy">
|
||||
<div class="person-option__info">
|
||||
<div class="person-option__name">王希</div>
|
||||
<div class="person-option__meta">所在医院：长庆油田职工医院<br>联系方式：138-9201-3001</div>
|
||||
</div>
|
||||
<span class="person-option__status person-option__status--busy">有派单</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="刘涛" data-hospital="华池县人民医院" data-phone="137-0012-5588" data-status="有派单" data-status-type="busy">
|
||||
<div class="person-option__info">
|
||||
<div class="person-option__name">刘涛</div>
|
||||
<div class="person-option__meta">所在医院：华池县人民医院<br>联系方式：137-0012-5588</div>
|
||||
</div>
|
||||
<span class="person-option__status person-option__status--busy">有派单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="person-empty" class="person-empty">未搜索到匹配的驻场人员</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="person-info" id="person-info">
|
||||
<div class="person-info__title">驻场人员信息</div>
|
||||
<div class="person-info__row">
|
||||
<span class="person-info__label">所在医院</span>
|
||||
<span id="info-hospital" class="person-info__value">宝石花医院</span>
|
||||
</div>
|
||||
<div class="person-info__row">
|
||||
<span class="person-info__label">联系方式</span>
|
||||
<span id="info-phone" class="person-info__value"><a href="tel:18522366695">185-2236-6695</a></span>
|
||||
</div>
|
||||
<div class="person-info__row">
|
||||
<span class="person-info__label">空闲状态</span>
|
||||
<span id="info-status" class="person-info__value"><span class="status-tag status-tag--online">空闲</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 派单备注 -->
|
||||
<div id="dispatch-form-section" class="form-section">
|
||||
<div class="form-section__title">派单说明</div>
|
||||
<div class="form-field">
|
||||
<textarea id="dispatch-note" class="form-textarea" placeholder="请输入派单备注信息...">给这个员工紧急挂号就诊，需要拍头颅CT</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dispatch-result" class="dispatch-result is-hidden">
|
||||
<div class="dispatch-result__title">派单信息</div>
|
||||
<div class="dispatch-result__row">
|
||||
<div class="dispatch-result__label">派单时间</div>
|
||||
<div id="dispatch-time" class="dispatch-result__value">2026-03-21 15:18:00</div>
|
||||
</div>
|
||||
<div class="dispatch-result__row">
|
||||
<div class="dispatch-result__label">驻场人员</div>
|
||||
<div id="dispatch-person" class="dispatch-result__value">王希（138-9201-3001）</div>
|
||||
</div>
|
||||
<div class="dispatch-result__row">
|
||||
<div class="dispatch-result__label">派单状态</div>
|
||||
<div class="dispatch-result__value"><span class="dispatch-tag">已完成</span></div>
|
||||
</div>
|
||||
<div class="dispatch-result__row">
|
||||
<div class="dispatch-result__label">结束时间</div>
|
||||
<div id="dispatch-end-time" class="dispatch-result__value">2026-03-21 16:40:00</div>
|
||||
</div>
|
||||
<div class="dispatch-result__row">
|
||||
<div class="dispatch-result__label">派单说明：</div>
|
||||
<div id="dispatch-note-result" class="dispatch-result__value">给这个员工紧急挂号就诊，需要拍头颅CT</div>
|
||||
</div>
|
||||
<div class="dispatch-result__row">
|
||||
<div class="dispatch-result__label">驻场说明：</div>
|
||||
<div class="dispatch-result__value">已经挂号并且开了头颅CT检查单，已陪同就诊完毕，员工状态稳定</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="dispatch-bottom-bar" class="bottom-bar">
|
||||
<!-- [交互] 点击确认派单，切换为已派单结果态 -->
|
||||
<button class="btn-submit" onclick="confirmDispatch()">确认派单</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
function getSelectedPerson() {
|
||||
return document.querySelector('.person-option.selected');
|
||||
}
|
||||
|
||||
function openPersonDropdown() {
|
||||
document.getElementById('person-select').classList.add('open');
|
||||
}
|
||||
|
||||
function closePersonDropdown() {
|
||||
document.getElementById('person-select').classList.remove('open');
|
||||
}
|
||||
|
||||
function handlePersonFocus() {
|
||||
openPersonDropdown();
|
||||
var input = document.getElementById('person-search');
|
||||
var selected = getSelectedPerson();
|
||||
if (selected && input.value === selected.getAttribute('data-name')) {
|
||||
input.value = '';
|
||||
filterPersons();
|
||||
}
|
||||
}
|
||||
|
||||
function selectPerson(el) {
|
||||
document.querySelectorAll('.person-option').forEach(function(item) {
|
||||
item.classList.remove('selected');
|
||||
});
|
||||
el.classList.add('selected');
|
||||
updatePersonInfo(el);
|
||||
document.getElementById('person-search').value = el.getAttribute('data-name') || '';
|
||||
filterPersons(true);
|
||||
closePersonDropdown();
|
||||
}
|
||||
|
||||
function updatePersonInfo(item) {
|
||||
var hospital = item.getAttribute('data-hospital') || '-';
|
||||
var phone = item.getAttribute('data-phone') || '-';
|
||||
var status = item.getAttribute('data-status') || '-';
|
||||
var statusType = item.getAttribute('data-status-type') || 'online';
|
||||
|
||||
document.getElementById('info-hospital').textContent = hospital;
|
||||
document.getElementById('info-phone').innerHTML = phone === '-' ? '-' : '<a href="tel:' + phone.replace(/-/g, '') + '">' + phone + '</a>';
|
||||
var statusClass = statusType === 'busy' ? 'status-tag--busy' : 'status-tag--online';
|
||||
document.getElementById('info-status').innerHTML = '<span class="status-tag ' + statusClass + '">' + status + '</span>';
|
||||
}
|
||||
|
||||
function filterPersons(skipRestore) {
|
||||
var input = document.getElementById('person-search');
|
||||
var keyword = input.value.trim().toLowerCase();
|
||||
var items = Array.prototype.slice.call(document.querySelectorAll('.person-option'));
|
||||
var visibleCount = 0;
|
||||
|
||||
items.forEach(function(item) {
|
||||
var name = (item.getAttribute('data-name') || '').toLowerCase();
|
||||
var hospital = (item.getAttribute('data-hospital') || '').toLowerCase();
|
||||
var matched = !keyword || name.indexOf(keyword) > -1 || hospital.indexOf(keyword) > -1;
|
||||
item.classList.toggle('is-hidden', !matched);
|
||||
if (matched) visibleCount += 1;
|
||||
});
|
||||
|
||||
document.getElementById('person-empty').classList.toggle('show', visibleCount === 0);
|
||||
|
||||
if (!skipRestore) {
|
||||
openPersonDropdown();
|
||||
}
|
||||
}
|
||||
|
||||
function restoreSelectedName() {
|
||||
var selected = getSelectedPerson();
|
||||
if (selected) {
|
||||
document.getElementById('person-search').value = selected.getAttribute('data-name') || '';
|
||||
}
|
||||
filterPersons(true);
|
||||
}
|
||||
|
||||
function confirmDispatch() {
|
||||
var selected = getSelectedPerson();
|
||||
if (!selected) { alert('请选择驻场人员'); return; }
|
||||
|
||||
var selectedName = selected.getAttribute('data-name');
|
||||
var selectedPhone = selected.getAttribute('data-phone');
|
||||
var dispatchNote = document.getElementById('dispatch-note').value.trim();
|
||||
|
||||
document.getElementById('dispatch-person').textContent = selectedName + '（' + selectedPhone + '）';
|
||||
document.getElementById('dispatch-note-result').textContent = dispatchNote || '暂无派单说明';
|
||||
|
||||
document.getElementById('person-select-section').classList.add('is-hidden');
|
||||
document.getElementById('dispatch-form-section').classList.add('is-hidden');
|
||||
document.getElementById('dispatch-result').classList.remove('is-hidden');
|
||||
document.getElementById('dispatch-bottom-bar').classList.add('is-hidden');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
var select = document.getElementById('person-select');
|
||||
if (!select.contains(event.target)) {
|
||||
restoreSelectedName();
|
||||
closePersonDropdown();
|
||||
}
|
||||
});
|
||||
|
||||
updatePersonInfo(getSelectedPerson());
|
||||
document.getElementById('person-search').value = getSelectedPerson().getAttribute('data-name');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,146 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.emergency-info { background: #fff7e6; padding: 10px 16px; flex-shrink: 0; border-bottom: 1px solid #ffe7ba; }
|
||||
.info-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.info-left { display: flex; align-items: center; gap: 6px; }
|
||||
.info-toggle { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: transform .2s; }
|
||||
.info-detail { display: flex; align-items: center; gap: 8px; }
|
||||
.info-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#fff1f0,#ffccc7); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||||
.info-title { font-size: 12px; color: #999; }
|
||||
.info-value { font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.4; }
|
||||
.advice-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(82,196,26,0.15); border: 1px solid #d6f0d6; max-width: 260px; }
|
||||
.advice-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg,#52C41A,#389e0d); color: #fff; }
|
||||
.advice-card__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
|
||||
.advice-card__title { font-size: 13px; font-weight: 600; }
|
||||
.advice-card__body { padding: 10px 14px; background: #f6ffed; font-size: 13px; line-height: 1.7; color: #1a1a1a; }
|
||||
.advice-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f6ffed; border-top: 1px dashed #d6f0d6; font-size: 11px; color: #999; }
|
||||
.end-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #e8e8e8; max-width: 260px; }
|
||||
.end-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg,#8c8c8c,#595959); color: #fff; }
|
||||
.end-card__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
|
||||
.end-card__title { font-size: 13px; font-weight: 600; }
|
||||
.end-card__body { padding: 10px 14px; background: #fafafa; font-size: 13px; line-height: 1.7; color: #666; }
|
||||
.end-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #fafafa; border-top: 1px dashed #e8e8e8; font-size: 11px; color: #999; }
|
||||
.ended-bar { padding: 14px 16px; background: #fafafa; border-top: 1px solid #f0f0f0; flex-shrink: 0; text-align: center; font-size: 13px; color: #999; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="sessionStorage.setItem('operatorWorkbenchTab','done');location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">陈伟 <span style="font-size:11px;font-weight:600;color:#52c41a;background:#f6ffed;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:4px;">已结束</span></span>
|
||||
</div>
|
||||
|
||||
<div id="emergency-info" class="emergency-info">
|
||||
<div class="info-top">
|
||||
<div class="info-left">
|
||||
<button id="toggle-info-btn" class="info-toggle" onclick="toggleEmergencyInfo()">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span style="font-size:11px;color:#666;">求助时间：2026-04-24 14:30</span>
|
||||
</div>
|
||||
<button onclick="location.href='./work-order-detail.html'" style="font-size:12px;color:#fa8c16;background:none;border:1px solid #fa8c16;border-radius:6px;padding:4px 10px;cursor:pointer;">查看工单</button>
|
||||
</div>
|
||||
<div id="emergency-info-detail" class="info-detail">
|
||||
<div class="info-avatar">👨</div>
|
||||
<div>
|
||||
<div class="info-title">患者信息</div>
|
||||
<div class="info-value">陈伟 · 男 · 47岁 · 采油三厂 · 第二作业区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">14:30</span></div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0 14px;"><span style="font-size:11px;color:#fa8c16;background:#fff7e6;padding:4px 12px;border-radius:10px;border:1px solid #ffe7ba;">新应急事件 · 陈伟发起求助</span></div>
|
||||
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">陈伟（患者）</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">我胸口很闷，呼吸困难，已经持续20分钟了。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e6f4ff,#91caff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">📡</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">操作人员（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">收到，已安排专业人员和救护车前往。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0 14px;"><span style="font-size:11px;color:#1677ff;background:#e6f4ff;padding:4px 12px;border-radius:10px;border:1px solid #bae0ff;">已派专业人员：张旭 | 已派救护车</span></div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">14:38</span></div>
|
||||
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张旭（专业人员）</div>
|
||||
<div class="advice-card">
|
||||
<div class="advice-card__head"><div class="advice-card__icon">✓</div><div class="advice-card__title">救助意见</div></div>
|
||||
<div class="advice-card__body">1. 保持半卧位休息。<br>2. 安排同事陪护观察。<br>3. 救护车已在途中。</div>
|
||||
<div class="advice-card__foot"><span>张旭</span><span>14:38</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">16:20</span></div>
|
||||
|
||||
<!-- 应急结束卡片 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f5f5f5,#d9d9d9);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🏁</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">系统通知</div>
|
||||
<div class="end-card">
|
||||
<div class="end-card__head"><div class="end-card__icon">✓</div><div class="end-card__title">本次应急已结束</div></div>
|
||||
<!-- <div class="end-card__body">患者已送达医院完成初步诊治，状态稳定。</div>-->
|
||||
<div class="end-card__foot"><span>结束时间</span><span>2026-04-24 16:20</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="ended-bar">本次应急已结束</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
var infoCollapsed = false;
|
||||
function toggleEmergencyInfo() {
|
||||
infoCollapsed = !infoCollapsed;
|
||||
document.getElementById('emergency-info-detail').style.display = infoCollapsed ? 'none' : 'flex';
|
||||
document.getElementById('toggle-info-btn').style.transform = infoCollapsed ? 'rotate(-90deg)' : '';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,305 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; display: flex; gap: 12px; }
|
||||
.nav-right-btn { background: none; border: none; cursor: pointer; font-size: 13px; padding: 4px 0; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 患者信息条 */
|
||||
.emergency-info { background: #fff7e6; padding: 10px 16px; flex-shrink: 0; border-bottom: 1px solid #ffe7ba; }
|
||||
.info-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.info-left { display: flex; align-items: center; gap: 6px; }
|
||||
.info-toggle { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: transform .2s; }
|
||||
.info-detail { display: flex; align-items: center; gap: 8px; }
|
||||
.info-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#fff1f0,#ffccc7); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||||
.info-title { font-size: 12px; color: #999; }
|
||||
.info-value { font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.4; }
|
||||
/* 调度状态条 */
|
||||
.dispatch-status-bar { background: #e6f4ff; padding: 8px 16px; flex-shrink: 0; border-bottom: 1px solid #bae0ff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.dispatch-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
|
||||
.dispatch-tag--blue { background: #fff; color: #1677ff; border: 1px solid #91caff; }
|
||||
.dispatch-tag--orange { background: #fff; color: #fa8c16; border: 1px solid #ffd591; }
|
||||
.dispatch-tag--green { background: #fff; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
/* 救助意见卡片 */
|
||||
.advice-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(82,196,26,0.15); border: 1px solid #d6f0d6; max-width: 260px; }
|
||||
.advice-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg,#52C41A,#389e0d); color: #fff; }
|
||||
.advice-card__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
|
||||
.advice-card__title { font-size: 13px; font-weight: 600; }
|
||||
.advice-card__body { padding: 10px 14px; background: #f6ffed; font-size: 13px; line-height: 1.7; color: #1a1a1a; }
|
||||
.advice-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f6ffed; border-top: 1px dashed #d6f0d6; font-size: 11px; color: #999; }
|
||||
/* 操作按钮栏 - 操作人员专属：更多调度按钮 */
|
||||
.action-bar { display: flex; gap: 6px; padding: 8px 12px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; flex-wrap: wrap; }
|
||||
.action-btn { height: 32px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 3px; border: none; padding: 0 10px; flex: 1; min-width: 0; }
|
||||
.action-btn--purple { background: #f9f0ff; color: #722ed1; border: 1px solid #d3adf7; }
|
||||
.action-btn--orange { background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591; }
|
||||
.action-btn--blue { background: #e6f4ff; color: #1677ff; border: 1px solid #91caff; }
|
||||
.action-btn--green { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
.action-btn--red { background: #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; }
|
||||
/* 二次确认弹窗 */
|
||||
.confirm-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 30; padding: 24px; }
|
||||
.confirm-mask.show { display: flex; }
|
||||
.confirm-dialog { width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
|
||||
.confirm-dialog__head { padding: 18px 20px 8px; font-size: 17px; font-weight: 700; color: #1a1a1a; text-align: center; }
|
||||
.confirm-dialog__body { padding: 0 20px 20px; font-size: 14px; line-height: 1.7; color: #666; text-align: center; }
|
||||
.confirm-dialog__actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.confirm-dialog__btn { flex: 1; height: 48px; border: none; background: #fff; font-size: 15px; cursor: pointer; }
|
||||
.confirm-dialog__btn + .confirm-dialog__btn { border-left: 1px solid #f0f0f0; }
|
||||
.confirm-dialog__btn--cancel { color: #666; }
|
||||
.confirm-dialog__btn--confirm { color: #ff4d4f; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">陈伟 <span style="font-size:11px;font-weight:600;color:#ff4d4f;background:#fff1f0;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:4px;">进行中</span></span>
|
||||
<div class="nav-right">
|
||||
<!-- [交互] 点击弹出结束应急确认弹窗 -->
|
||||
<button class="nav-right-btn" style="color:#ff4d4f;" onclick="openEndConfirm()">结束应急</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者信息条 -->
|
||||
<div id="emergency-info" class="emergency-info">
|
||||
<div class="info-top">
|
||||
<div class="info-left">
|
||||
<button id="toggle-info-btn" class="info-toggle" onclick="toggleEmergencyInfo()">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span style="font-size:11px;color:#666;">求助时间：2026-04-24 14:30</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./work-order-detail-ongoing.html -->
|
||||
<button onclick="location.href='../workbench/work-order-detail-ongoing.html'" style="font-size:12px;color:#fa8c16;background:none;border:1px solid #fa8c16;border-radius:6px;padding:4px 10px;cursor:pointer;">查看工单</button>
|
||||
</div>
|
||||
<div id="emergency-info-detail" class="info-detail">
|
||||
<div class="info-avatar">👨</div>
|
||||
<div>
|
||||
<div class="info-title">患者信息</div>
|
||||
<div class="info-value">陈伟 · 男 · 47岁 · 采油三厂 · 第二作业区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <!– 调度状态条 –>-->
|
||||
<!-- <div class="dispatch-status-bar">-->
|
||||
<!-- <span style="font-size:11px;color:#666;">调度状态：</span>-->
|
||||
<!-- <span class="dispatch-tag dispatch-tag--blue">已派专业人员</span>-->
|
||||
<!-- <span class="dispatch-tag dispatch-tag--orange">等待驻场确认</span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">14:30</span></div>
|
||||
|
||||
<!-- 系统通知：应急开始 -->
|
||||
<!-- <div style="text-align:center;margin:8px 0 14px;"><span style="font-size:11px;color:#fa8c16;background:#fff7e6;padding:4px 12px;border-radius:10px;border:1px solid #ffe7ba;">新应急事件 · 陈伟发起求助</span></div>-->
|
||||
|
||||
<!-- 患者首条消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">陈伟（患者）</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">📹 通话时长 12:23</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作人员消息（我） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e6f4ff,#91caff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">📡</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">操作人员（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">收到，请保持冷静，不要活动。我已安排专业人员张旭联系您，请保持手机畅通。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统通知：派单 -->
|
||||
<!-- <div style="text-align:center;margin:8px 0 14px;"><span style="font-size:11px;color:#1677ff;background:#e6f4ff;padding:4px 12px;border-radius:10px;border:1px solid #bae0ff;">已派专业人员：张旭</span></div>-->
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">14:35</span></div>
|
||||
|
||||
<!-- 专业人员消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张旭（专业人员）</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">陈伟您好，我是专业人员张旭。请问疼痛是否向左肩或后背放射？有没有出冷汗？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者回复 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">陈伟（患者）</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">有点往左肩放射，出了冷汗，人有点发慌。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">14:38</span></div>
|
||||
|
||||
<!-- 专业人员发送救助意见 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张旭（专业人员）</div>
|
||||
<div class="advice-card">
|
||||
<div class="advice-card__head">
|
||||
<div class="advice-card__icon">✓</div>
|
||||
<div class="advice-card__title">救助意见</div>
|
||||
</div>
|
||||
<div class="advice-card__body">1. 立即停止活动，保持半卧位。<br>2. 安排同事陪护，持续观察。<br>3. 建议尽快安排救护车转运至最近医院。<br>4. 如症状加重立即拨打120。</div>
|
||||
<div class="advice-card__foot">
|
||||
<span>张旭</span>
|
||||
<span>14:38</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作人员回复 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e6f4ff,#91caff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">📡</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">操作人员（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">收到，正在安排驻场人员前往现场，同时联系救护车。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮栏 - 操作人员专属 -->
|
||||
<div class="action-bar">
|
||||
<!-- [交互] 点击跳转至: ./dispatch-onsite.html -->
|
||||
<button class="action-btn action-btn--purple" onclick="location.href='./dispatch-onsite.html'">驻场派单</button>
|
||||
<!-- [交互] 点击跳转至: ./dispatch-ambulance.html -->
|
||||
<button class="action-btn action-btn--orange" onclick="location.href='./dispatch-ambulance.html'">救护车支援</button>
|
||||
<!-- [交互] 点击跳转至: ./rescue-summary.html -->
|
||||
<button class="action-btn action-btn--green" onclick="location.href='./rescue-summary.html'">救助信息</button>
|
||||
<!-- [交互] 点击跳转至: ./patient-location.html -->
|
||||
<button class="action-btn action-btn--blue" onclick="location.href='./patient-location.html'">员工位置</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 媒体选择面板 -->
|
||||
<div id="media-panel" style="display:none;background:#f7f8fa;border-top:1px solid #f0f0f0;padding:16px 20px;flex-shrink:0;">
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
|
||||
<span style="font-size:11px;color:#666;">拍照</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">🖼️</div>
|
||||
<span style="font-size:11px;color:#666;">图库</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📹</div>
|
||||
<span style="font-size:11px;color:#666;">视频通话</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区 -->
|
||||
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:8px 12px 14px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<button id="voice-btn" onclick="toggleVoice()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;flex-shrink:0;">🎤</button>
|
||||
<input id="chat-input" type="text" placeholder="输入调度指令或沟通内容..." style="flex:1;background:#f5f5f5;border:none;border-radius:20px;padding:8px 14px;font-size:14px;outline:none;color:#1a1a1a;" />
|
||||
<button id="voice-record-btn" style="display:none;flex:1;height:36px;background:#f5f5f5;border:1.5px solid #d9d9d9;border-radius:20px;font-size:13px;color:#555;cursor:pointer;text-align:center;">按住说话</button>
|
||||
<button onclick="toggleMediaPanel()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:20px;font-weight:300;cursor:pointer;flex-shrink:0;color:#666;line-height:1;">+</button>
|
||||
<button onclick="sendMsg()" style="width:34px;height:34px;border-radius:50%;background:#1677ff;border:none;font-size:16px;cursor:pointer;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结束应急确认弹窗 -->
|
||||
<div id="confirm-mask" class="confirm-mask" onclick="closeEndConfirm(event)">
|
||||
<div class="confirm-dialog">
|
||||
<div class="confirm-dialog__head">是否确认结束应急</div>
|
||||
<div class="confirm-dialog__body">结束后本次应急会话将进入"已结束"列表，仅支持查看记录，不可继续发送消息。</div>
|
||||
<div class="confirm-dialog__actions">
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--cancel" onclick="closeEndConfirm(event)">取消</button>
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--confirm" onclick="confirmEndEmergency(event)">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
var infoCollapsed = false;
|
||||
function toggleEmergencyInfo() {
|
||||
infoCollapsed = !infoCollapsed;
|
||||
document.getElementById('emergency-info-detail').style.display = infoCollapsed ? 'none' : 'flex';
|
||||
document.getElementById('toggle-info-btn').style.transform = infoCollapsed ? 'rotate(-90deg)' : '';
|
||||
}
|
||||
|
||||
function toggleMediaPanel() {
|
||||
var m = document.getElementById('media-panel');
|
||||
m.style.display = m.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function closeMediaPanel() {
|
||||
document.getElementById('media-panel').style.display = 'none';
|
||||
}
|
||||
|
||||
var isVoiceMode = false;
|
||||
function toggleVoice() {
|
||||
isVoiceMode = !isVoiceMode;
|
||||
var input = document.getElementById('chat-input');
|
||||
var voiceBtn = document.getElementById('voice-btn');
|
||||
var recordBtn = document.getElementById('voice-record-btn');
|
||||
if (isVoiceMode) { input.style.display = 'none'; recordBtn.style.display = 'flex'; voiceBtn.textContent = '⌨️'; voiceBtn.style.background = '#e6f4ff'; }
|
||||
else { input.style.display = ''; recordBtn.style.display = 'none'; voiceBtn.textContent = '🎤'; voiceBtn.style.background = '#f5f5f5'; }
|
||||
}
|
||||
|
||||
function openEndConfirm() { document.getElementById('confirm-mask').classList.add('show'); }
|
||||
function closeEndConfirm(event) {
|
||||
if (event) { event.stopPropagation(); if (event.currentTarget !== event.target && !event.target.classList.contains('confirm-dialog__btn--cancel')) return; }
|
||||
document.getElementById('confirm-mask').classList.remove('show');
|
||||
}
|
||||
|
||||
function confirmEndEmergency(event) {
|
||||
event.stopPropagation();
|
||||
sessionStorage.setItem('operatorWorkbenchTab', 'done');
|
||||
location.href = './index.html';
|
||||
}
|
||||
|
||||
function sendMsg() {
|
||||
var input = document.getElementById('chat-input');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
var scroll = document.getElementById('chat-scroll');
|
||||
var bubble = document.createElement('div');
|
||||
bubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
bubble.innerHTML = '<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e6f4ff,#91caff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">📡</div><div style="display:flex;flex-direction:column;align-items:flex-end;"><div style="font-size:11px;color:#999;margin-bottom:4px;">操作人员（我）</div><div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">' + text + '</div></div>';
|
||||
scroll.insertBefore(bubble, scroll.lastElementChild);
|
||||
input.value = '';
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.form-section { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.form-section__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
|
||||
.form-section__title::before { content: ''; width: 3px; height: 16px; background: #1677ff; border-radius: 2px; }
|
||||
.form-field { margin-bottom: 16px; }
|
||||
.form-field:last-child { margin-bottom: 0; }
|
||||
.form-label { font-size: 13px; color: #333; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
|
||||
.form-label .required { color: #ff4d4f; }
|
||||
.form-input { width: 100%; height: 40px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 12px; font-size: 14px; outline: none; color: #1a1a1a; background: #fff; }
|
||||
.form-input:focus { border-color: #1677ff; }
|
||||
.form-textarea { width: 100%; min-height: 100px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; resize: vertical; font-family: inherit; line-height: 1.6; color: #1a1a1a; }
|
||||
.form-textarea:focus { border-color: #1677ff; }
|
||||
.form-select { width: 100%; height: 40px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 12px; font-size: 14px; outline: none; color: #1a1a1a; background: #fff; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
|
||||
.form-select:focus { border-color: #1677ff; }
|
||||
/* 患者信息卡 */
|
||||
.patient-card { background: #fff7e6; border: 1px solid #ffe7ba; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
|
||||
.patient-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#fff1f0,#ffccc7); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.patient-card__info { flex: 1; }
|
||||
.patient-card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.patient-card__detail { font-size: 12px; color: #666; margin-top: 2px; }
|
||||
/* 照片上传 */
|
||||
.photo-grid { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.photo-item { width: 72px; height: 72px; border-radius: 8px; border: 1px solid #e8e8e8; overflow: hidden; background: #fafafa; display: flex; align-items: center; justify-content: center; }
|
||||
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.photo-add { width: 72px; height: 72px; border-radius: 8px; border: 2px dashed #d9d9d9; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #bbb; font-size: 24px; transition: all .15s; }
|
||||
.photo-add:hover { border-color: #1677ff; color: #1677ff; }
|
||||
.photo-add span { font-size: 10px; margin-top: 2px; }
|
||||
/* 底部按钮 */
|
||||
.bottom-bar { padding: 12px 16px 28px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.btn-submit { width: 100%; height: 44px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; border: none; background: #ff4d4f; color: #fff; transition: background .2s; }
|
||||
.btn-submit:hover { background: #ff7875; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./emergency-chat.html -->
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">结束应急</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 患者信息 -->
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div class="patient-card">
|
||||
<div class="patient-card__avatar">👨</div>
|
||||
<div class="patient-card__info">
|
||||
<div class="patient-card__name">陈伟 · 男 · 47岁</div>
|
||||
<div class="patient-card__detail">采油三厂 · 第二作业区 | 求助时间：14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结束原因 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">结束信息</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label"><span class="required">*</span>结束原因</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择结束原因</option>
|
||||
<option selected>患者已送达医院</option>
|
||||
<option>患者症状缓解</option>
|
||||
<option>误报/取消求助</option>
|
||||
<option>转交其他机构处理</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label"><span class="required">*</span>处理结果</div>
|
||||
<textarea class="form-textarea" placeholder="请描述本次应急的处理结果...">患者已由救护车送达西安市第一人民医院急诊科，初步诊断为心绞痛，目前状态稳定，已安排住院观察。</textarea>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label">送达医院</div>
|
||||
<input class="form-input" type="text" value="西安市第一人民医院" placeholder="请输入送达医院名称" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 现场照片 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">现场照片</div>
|
||||
<div class="form-field">
|
||||
<div class="photo-grid">
|
||||
<div class="photo-item" style="background:linear-gradient(135deg,#e6f4ff,#bae0ff);font-size:28px;color:#1677ff;">🏥</div>
|
||||
<div class="photo-item" style="background:linear-gradient(135deg,#f6ffed,#d9f7be);font-size:28px;color:#52c41a;">📋</div>
|
||||
<div class="photo-add">+<span>添加</span></div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#999;margin-top:6px;">已上传 2/9 张</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section__title">补充说明</div>
|
||||
<div class="form-field">
|
||||
<textarea class="form-textarea" placeholder="如有其他需要补充的信息，请在此填写..." style="min-height:80px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提交按钮 -->
|
||||
<div class="bottom-bar">
|
||||
<!-- [交互] 点击确认结束应急，返回工作台 -->
|
||||
<button class="btn-submit" onclick="confirmEnd()">确认结束应急</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
function confirmEnd() {
|
||||
if (confirm('确认结束本次应急？结束后不可撤销。')) {
|
||||
sessionStorage.setItem('operatorWorkbenchTab', 'done');
|
||||
location.href = './index.html';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,193 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
/* 一级Tab */
|
||||
.primary-tabs { display: flex; gap: 8px; padding: 12px 16px 8px; background: #f7f8fa; }
|
||||
.primary-tab { flex: 1; height: 38px; border-radius: 19px; background: #fff; color: #666; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); border: 1px solid transparent; text-decoration: none; }
|
||||
.primary-tab.active { color: #1677ff; border-color: #b7d8ff; background: #e6f4ff; }
|
||||
/* 二级Tab */
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
/* 内容面板 */
|
||||
.content-panel { display: none; }
|
||||
.content-panel.active { display: block; }
|
||||
/* 卡片 */
|
||||
.case-card { background: #fff; border-radius: 12px; margin: 0 16px 10px; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.case-head { display: flex; align-items: center; gap: 10px; }
|
||||
.case-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.case-avatar-emergency { background: linear-gradient(135deg,#fff1f0,#ffccc7); }
|
||||
.case-main { flex: 1; min-width: 0; }
|
||||
.case-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.case-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.case-meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-purple { background: #f9f0ff; color: #722ed1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，李明</div>
|
||||
<div style="color:rgba(255,255,255,0.82);font-size:12px;margin-bottom:4px;">所属应急中心：西安应急中心</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">操作人员</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">3</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">应急进行中</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">4</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">大病待确认</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一级Tab：应急求助(当前) / 大病就医(跳转) -->
|
||||
<div class="primary-tabs">
|
||||
<a class="primary-tab active" href="./index.html">应急求助</a>
|
||||
<a class="primary-tab" href="./serious-illness-list.html">大病就医</a>
|
||||
</div>
|
||||
|
||||
<!-- 二级Tab：进行中 / 已完成 -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-ongoing')">进行中<span class="badge">3</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 进行中 -->
|
||||
<div id="panel-ongoing" class="content-panel active">
|
||||
<div style="height:10px;"></div>
|
||||
<div class="case-card" onclick="location.href='./emergency-chat.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">🚑</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">陈伟<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">47岁</span></div>
|
||||
<span class="tag tag-red">进行中</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-24 14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" onclick="location.href='./emergency-chat.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">🚑</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">刘海波<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">55岁</span></div>
|
||||
<span class="tag tag-red">进行中</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-24 10:20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" onclick="location.href='./emergency-chat.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">🚑</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">王建国<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">38岁</span></div>
|
||||
<span class="tag tag-red">进行中</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-24 08:15</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已完成 -->
|
||||
<div id="panel-done" class="content-panel">
|
||||
<div style="height:10px;"></div>
|
||||
<div class="case-card" onclick="location.href='./emergency-chat-done.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">✅</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">赵志强<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">61岁</span></div>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-24 08:15</div>
|
||||
<div class="case-meta">结束时间：2026-04-23 18:20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" onclick="location.href='./rescue-summary.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">📄</div>
|
||||
<div class="case-main">
|
||||
<div class="case-title-row">
|
||||
<div class="case-name">孙莉<span style="font-size:13px;font-weight:400;color:#666;margin-left:6px;">29岁</span></div>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
<div class="case-meta">求助时间：2026-04-24 08:15</div>
|
||||
<div class="case-meta">结束时间：2026-04-22 11:05</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">📡</span><span class="tab-label">工作台</span><span class="tab-badge">3</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
function switchTab(el, panelId) {
|
||||
el.parentElement.querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.content-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
document.getElementById(panelId).classList.add('active');
|
||||
}
|
||||
|
||||
var defaultTab = sessionStorage.getItem('operatorWorkbenchTab');
|
||||
if (defaultTab === 'done') {
|
||||
var doneTab = document.querySelectorAll('.seg-tab')[1];
|
||||
switchTab(doneTab, 'panel-done');
|
||||
sessionStorage.removeItem('operatorWorkbenchTab');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,200 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; position: relative; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(0,0,0,0.06); flex-shrink: 0; position: relative; z-index: 10; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.map-wrap { flex: 1; position: relative; overflow: hidden; }
|
||||
.map-bg { position: absolute; inset: 0; background: linear-gradient(160deg,#d6f4ff 0%,#e8f8e0 40%,#f0f6ff 100%); }
|
||||
.map-grid { position: absolute; inset: 0; opacity: .08; background: repeating-linear-gradient(0deg,transparent,transparent 39px,#69b1ff 39px,#69b1ff 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#69b1ff 39px,#69b1ff 40px); }
|
||||
.map-road-h { position: absolute; height: 4px; background: rgba(255,255,255,0.7); border-radius: 2px; }
|
||||
.map-road-v { position: absolute; width: 4px; background: rgba(255,255,255,0.7); border-radius: 2px; }
|
||||
.patient-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; }
|
||||
.patient-pin__dot { width: 16px; height: 16px; background: #ff4d4f; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(255,77,79,0.4); position: relative; z-index: 2; }
|
||||
.patient-pin__pulse { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,77,79,0.25); animation: pulse 2s infinite; z-index: 1; }
|
||||
@keyframes pulse { 0%{transform:translate(-50%,-50%) scale(1);opacity:.6;} 100%{transform:translate(-50%,-50%) scale(3.5);opacity:0;} }
|
||||
.patient-pin__label { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #fff; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; color: #ff4d4f; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
|
||||
.res-tabs { position: absolute; top: 8px; left: 0; right: 0; z-index: 8; display: flex; gap: 8px; padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
.res-tabs::-webkit-scrollbar { display: none; }
|
||||
.res-tab { flex-shrink: 0; padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 500; color: #333; background: rgba(255,255,255,0.92); box-shadow: 0 1px 4px rgba(0,0,0,0.1); cursor: pointer; border: 2px solid transparent; transition: all .2s; white-space: nowrap; }
|
||||
.res-tab--active { background: #1677ff; color: #fff; box-shadow: 0 2px 8px rgba(22,119,255,0.35); }
|
||||
.marker { position: absolute; z-index: 4; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform .15s; }
|
||||
.marker:active { transform: scale(1.15); }
|
||||
.marker__icon { width: 32px; height: 32px; border-radius: 50%; background: #1677ff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
|
||||
.marker__icon--hospital { background: #1677ff; }
|
||||
.marker__icon--partner { background: #722ed1; }
|
||||
.marker__icon--clinic { background: #13c2c2; }
|
||||
.marker__icon--ambulance { background: #ff4d4f; }
|
||||
.marker__icon--aed { background: #fa8c16; }
|
||||
.marker__icon--kit { background: #52c41a; }
|
||||
.marker__label { margin-top: 2px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.92); font-size: 10px; color: #333; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
|
||||
.res-card { position: absolute; bottom: 0; left: 0; right: 0; z-index: 12; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.12); padding: 16px; transform: translateY(100%); transition: transform .3s ease; }
|
||||
.res-card--show { transform: translateY(0); }
|
||||
.res-card__close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: #f5f5f5; border: none; font-size: 16px; color: #999; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.res-card__body { display: flex; gap: 12px; }
|
||||
.res-card__img { width: 80px; height: 80px; border-radius: 8px; background: #f0f5ff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; }
|
||||
.res-card__info { flex: 1; min-width: 0; }
|
||||
.res-card__name { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.res-card__org { font-size: 12px; color: #999; margin-bottom: 6px; }
|
||||
.res-card__row { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #666; margin-bottom: 3px; }
|
||||
.res-card__row svg { flex-shrink: 0; }
|
||||
.res-card__dist { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #e6f7ff; color: #1677ff; font-size: 11px; font-weight: 500; }
|
||||
.res-card__actions { display: flex; gap: 8px; margin-top: 12px; }
|
||||
.res-card__btn { flex: 1; height: 36px; border-radius: 8px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
|
||||
.res-card__btn--call { background: #1677ff; color: #fff; }
|
||||
.res-card__btn--nav { background: #f0f5ff; color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./emergency-chat.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">患者定位</span>
|
||||
</div>
|
||||
|
||||
<div class="map-wrap" onclick="closeCard(event)">
|
||||
<div class="map-bg"></div>
|
||||
<div class="map-grid"></div>
|
||||
<div class="map-road-h" style="top:28%;left:5%;width:90%;"></div>
|
||||
<div class="map-road-h" style="top:55%;left:10%;width:75%;"></div>
|
||||
<div class="map-road-h" style="top:78%;left:15%;width:65%;"></div>
|
||||
<div class="map-road-v" style="left:30%;top:8%;height:80%;"></div>
|
||||
<div class="map-road-v" style="left:55%;top:5%;height:88%;"></div>
|
||||
<div class="map-road-v" style="left:78%;top:12%;height:70%;"></div>
|
||||
|
||||
<div class="patient-pin">
|
||||
<div class="patient-pin__pulse"></div>
|
||||
<div class="patient-pin__dot"></div>
|
||||
<div class="patient-pin__label">采油三厂第二作业区值班室</div>
|
||||
</div>
|
||||
|
||||
<div class="res-tabs" id="resTabs">
|
||||
<div class="res-tab res-tab--active" data-type="hospital" onclick="switchTab(this)">油田医院</div>
|
||||
<div class="res-tab" data-type="partner" onclick="switchTab(this)">合作医院</div>
|
||||
<div class="res-tab" data-type="clinic" onclick="switchTab(this)">医疗点</div>
|
||||
<div class="res-tab" data-type="ambulance" onclick="switchTab(this)">救护车</div>
|
||||
<div class="res-tab" data-type="aed" onclick="switchTab(this)">AED</div>
|
||||
<div class="res-tab" data-type="kit" onclick="switchTab(this)">急救包</div>
|
||||
</div>
|
||||
|
||||
<div id="markers"></div>
|
||||
|
||||
<div class="res-card" id="resCard">
|
||||
<button class="res-card__close" onclick="closeCard(event)">✕</button>
|
||||
<div class="res-card__body">
|
||||
<div class="res-card__img" id="cardImg">🏥</div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name" id="cardName">-</div>
|
||||
<div class="res-card__org" id="cardOrg">-</div>
|
||||
<div class="res-card__row"><span class="res-card__dist" id="cardDist">-</span></div>
|
||||
<div class="res-card__row" id="cardPhone">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
|
||||
<span id="cardPhoneText">-</span>
|
||||
</div>
|
||||
<div class="res-card__row" id="cardAddr">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
<span id="cardAddrText">-</span>
|
||||
</div>
|
||||
<div class="res-card__actions">
|
||||
<button class="res-card__btn res-card__btn--call">📞 联系</button>
|
||||
<button class="res-card__btn res-card__btn--nav">🧭 导航</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
var DATA = {
|
||||
hospital: [
|
||||
{ name:'长庆油田职工医院', org:'长庆油田公司', dist:'1.2km', phone:'0911-8812345', addr:'延安市宝塔区长庆路88号', icon:'🏥', top:'32%', left:'22%' },
|
||||
{ name:'采油三厂职工医院', org:'采油三厂', dist:'2.3km', phone:'0911-8001234', addr:'长庆路128号', icon:'🏥', top:'18%', left:'68%' }
|
||||
],
|
||||
partner: [
|
||||
{ name:'西安市第一人民医院', org:'西安市卫健委', dist:'15.6km', phone:'029-87654321', addr:'南大街256号', icon:'🏨', top:'25%', left:'75%' },
|
||||
{ name:'长庆油田总医院', org:'长庆油田公司', dist:'22.1km', phone:'029-86543210', addr:'兴隆路88号', icon:'🏨', top:'70%', left:'20%' }
|
||||
],
|
||||
clinic: [
|
||||
{ name:'采油三厂卫生所', org:'采油三厂', dist:'0.8km', phone:'0911-8002345', addr:'采油三厂生活区内', icon:'🩺', top:'45%', left:'38%' },
|
||||
{ name:'第一作业区医疗点', org:'第二作业区', dist:'1.1km', phone:'0911-8834567', addr:'第二作业区服务站', icon:'🩺', top:'62%', left:'65%' }
|
||||
],
|
||||
ambulance: [
|
||||
{ name:'陕J·120A3', org:'采油三厂应急站', dist:'1.5km', phone:'0911-8005678', addr:'当前位置：采油三厂生活区北门', icon:'🚑', top:'40%', left:'60%' },
|
||||
{ name:'陕J·120B7', org:'采油二厂应急站', dist:'6.2km', phone:'0911-8006789', addr:'当前位置：采油二厂综合楼附近', icon:'🚑', top:'22%', left:'40%' }
|
||||
],
|
||||
aed: [
|
||||
{ name:'值班室AED', org:'第二作业区', dist:'0.1km', phone:'0911-8000001', addr:'值班室入口右侧墙面', icon:'⚡', top:'48%', left:'25%' },
|
||||
{ name:'办公楼AED', org:'采油三厂', dist:'0.6km', phone:'0911-8000002', addr:'办公楼一层大厅', icon:'⚡', top:'35%', left:'48%' }
|
||||
],
|
||||
kit: [
|
||||
{ name:'值班室急救包', org:'第二作业区', dist:'0.0km', phone:'0911-8000003', addr:'值班室前台抽屉', icon:'🧰', top:'52%', left:'70%' },
|
||||
{ name:'车辆急救包', org:'调度车辆', dist:'0.4km', phone:'0911-8000004', addr:'现场调度车后备箱', icon:'🧰', top:'68%', left:'42%' }
|
||||
]
|
||||
};
|
||||
var ICON_CLS = { hospital:'hospital', partner:'partner', clinic:'clinic', ambulance:'ambulance', aed:'aed', kit:'kit' };
|
||||
var markersEl = document.getElementById('markers');
|
||||
var cardEl = document.getElementById('resCard');
|
||||
var curType = 'hospital';
|
||||
|
||||
function renderMarkers(type) {
|
||||
markersEl.innerHTML = '';
|
||||
var list = DATA[type] || [];
|
||||
list.forEach(function(item) {
|
||||
var m = document.createElement('div');
|
||||
m.className = 'marker';
|
||||
m.style.top = item.top;
|
||||
m.style.left = item.left;
|
||||
m.innerHTML = '<div class="marker__icon marker__icon--' + ICON_CLS[type] + '">' + item.icon + '</div><div class="marker__label">' + item.name + '</div>';
|
||||
m.onclick = function(e) { e.stopPropagation(); showCard(item); };
|
||||
markersEl.appendChild(m);
|
||||
});
|
||||
}
|
||||
|
||||
function showCard(item) {
|
||||
document.getElementById('cardImg').textContent = item.icon;
|
||||
document.getElementById('cardName').textContent = item.name;
|
||||
document.getElementById('cardOrg').textContent = item.org;
|
||||
document.getElementById('cardDist').textContent = '距患者 ' + item.dist;
|
||||
document.getElementById('cardPhoneText').textContent = item.phone;
|
||||
document.getElementById('cardAddrText').textContent = item.addr;
|
||||
cardEl.classList.add('res-card--show');
|
||||
}
|
||||
|
||||
function closeCard(e) {
|
||||
if (e && e.target.closest && e.target.closest('.marker')) return;
|
||||
cardEl.classList.remove('res-card--show');
|
||||
}
|
||||
|
||||
function switchTab(el) {
|
||||
var tabs = document.querySelectorAll('.res-tab');
|
||||
tabs.forEach(function(t) { t.classList.remove('res-tab--active'); });
|
||||
el.classList.add('res-tab--active');
|
||||
curType = el.getAttribute('data-type');
|
||||
cardEl.classList.remove('res-card--show');
|
||||
renderMarkers(curType);
|
||||
}
|
||||
|
||||
renderMarkers(curType);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,265 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 折叠区块 */
|
||||
.section { margin: 10px 16px; background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.section__header { display: flex; align-items: center; justify-content: space-between; padding: 14px; cursor: pointer; user-select: none; }
|
||||
.section__title { font-size: 15px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; gap: 6px; }
|
||||
.section__count { font-size: 12px; color: #999; font-weight: 400; }
|
||||
.section__arrow { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: transform .2s; color: #bbb; }
|
||||
.section__arrow--up { transform: rotate(180deg); }
|
||||
.section__body { border-top: 1px solid #f0f0f0; }
|
||||
.section__body--hidden { display: none; }
|
||||
/* 小结条目 */
|
||||
.summary-item { padding: 12px 14px; border-bottom: 1px solid #f5f5f5; }
|
||||
.summary-item:last-child { border-bottom: none; }
|
||||
.summary-item__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
|
||||
.summary-item__time { font-size: 12px; color: #999; }
|
||||
.summary-item__ops { display: flex; gap: 8px; }
|
||||
.summary-item__ops button { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 4px; transition: all .15s; }
|
||||
.summary-item__ops .btn-edit { color: #1677ff; }
|
||||
.summary-item__ops .btn-edit:hover { background: #e6f4ff; }
|
||||
.summary-item__ops .btn-del { color: #ff4d4f; }
|
||||
.summary-item__ops .btn-del:hover { background: #fff1f0; }
|
||||
.summary-item__content { font-size: 14px; color: #1a1a1a; line-height: 1.7; white-space: pre-wrap; }
|
||||
.summary-item__author { font-size: 11px; color: #999; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
|
||||
/* 新增小结输入 */
|
||||
.add-area { padding: 12px 14px; border-top: 1px solid #f0f0f0; }
|
||||
.add-area__input { width: 100%; min-height: 56px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 8px 10px; font-size: 13px; outline: none; resize: none; font-family: inherit; line-height: 1.6; color: #1a1a1a; margin-bottom: 6px; }
|
||||
.add-area__input:focus { border-color: #1677ff; }
|
||||
.add-area__actions { display: flex; align-items: center; justify-content: space-between; }
|
||||
.add-area__count { font-size: 12px; color: #999; }
|
||||
.add-area__btn { height: 32px; padding: 0 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; background: #1677ff; color: #fff; transition: background .2s; }
|
||||
.add-area__btn:hover { background: #4096ff; }
|
||||
/* 救助结果 */
|
||||
.result-text { padding: 14px; font-size: 14px; color: #1a1a1a; line-height: 1.7; white-space: pre-wrap; }
|
||||
.result-text--empty { color: #bbb; font-style: italic; }
|
||||
.result-edit-area { padding: 0 14px 14px; display: none; }
|
||||
.result-edit-area textarea { width: 100%; min-height: 100px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 8px 10px; font-size: 13px; outline: none; resize: none; font-family: inherit; line-height: 1.6; color: #1a1a1a; }
|
||||
.result-edit-area textarea:focus { border-color: #1677ff; }
|
||||
.result-edit-area__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
|
||||
.result-edit-area__btn { height: 30px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: background .2s; }
|
||||
.result-edit-area__btn--save { background: #1677ff; color: #fff; }
|
||||
.result-edit-area__btn--cancel { background: #f5f5f5; color: #666; }
|
||||
.edit-trigger { font-size: 12px; color: #1677ff; cursor: pointer; background: none; border: none; padding: 2px 6px; border-radius: 4px; }
|
||||
.edit-trigger:hover { background: #e6f4ff; }
|
||||
/* 照片网格 */
|
||||
.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; }
|
||||
.photo-item { width: calc(33.33% - 6px); aspect-ratio: 1; border-radius: 8px; overflow: hidden; position: relative; background: #f5f5f5; }
|
||||
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.photo-item__del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; font-size: 12px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
||||
.photo-add { width: calc(33.33% - 6px); aspect-ratio: 1; border-radius: 8px; border: 1px dashed #d9d9d9; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #bbb; font-size: 12px; gap: 4px; transition: border-color .2s; }
|
||||
.photo-add:hover { border-color: #1677ff; color: #1677ff; }
|
||||
.photo-add__icon { font-size: 24px; line-height: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">救助信息</span>
|
||||
</div>
|
||||
|
||||
<!-- 患者信息摘要 -->
|
||||
<div style="background:#fff7e6;padding:10px 16px;border-bottom:1px solid #ffe7ba;font-size:12px;color:#666;flex-shrink:0;">
|
||||
当前应急：<span style="font-weight:600;color:#1a1a1a;">陈伟</span> · 男 · 47岁 · 采油三厂第二作业区
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 一、补充小结 -->
|
||||
<div class="section" id="sec-summary">
|
||||
<div class="section__header" onclick="toggleSection('sec-summary')">
|
||||
<div class="section__title">📝 补充小结 <span class="section__count" id="summary-count">（3条）</span></div>
|
||||
<div class="section__arrow section__arrow--up" id="arrow-sec-summary"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 4l4 4 4-4"/></svg></div>
|
||||
</div>
|
||||
<div class="section__body" id="body-sec-summary">
|
||||
<div id="summary-list">
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__head">
|
||||
<span class="summary-item__time">2026-04-24 14:35</span>
|
||||
<div class="summary-item__ops"><button class="btn-edit" onclick="editSummary(this)">编辑</button><button class="btn-del" onclick="delSummary(this)">删除</button></div>
|
||||
</div>
|
||||
<div class="summary-item__content">14:30 接到患者陈伟求助，主诉胸闷呼吸困难约20分钟。立即安排专业人员张旭远程接诊，同步联系采油三厂驻场人员赵强前往现场。</div>
|
||||
<div class="summary-item__author">📡 操作人员 · 李明</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__head">
|
||||
<span class="summary-item__time">2026-04-24 14:42</span>
|
||||
<div class="summary-item__ops"><button class="btn-edit" onclick="editSummary(this)">编辑</button><button class="btn-del" onclick="delSummary(this)">删除</button></div>
|
||||
</div>
|
||||
<div class="summary-item__content">专业人员张旭初步判断疑似心绞痛，建议尽快转运。已呼叫采油三厂应急站救护车（陕A·120E1），驾驶员王大力，预计10分钟到达。</div>
|
||||
<div class="summary-item__author">📡 操作人员 · 李明</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__head">
|
||||
<span class="summary-item__time">2026-04-24 15:05</span>
|
||||
<div class="summary-item__ops"><button class="btn-edit" onclick="editSummary(this)">编辑</button><button class="btn-del" onclick="delSummary(this)">删除</button></div>
|
||||
</div>
|
||||
<div class="summary-item__content">驻场人员赵强已到达现场，确认患者意识清醒，生命体征基本平稳。救护车已到达，正在转运患者前往采油三厂职工医院。</div>
|
||||
<div class="summary-item__author">📡 操作人员 · 李明</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 新增小结输入区 -->
|
||||
<div class="add-area">
|
||||
<textarea class="add-area__input" placeholder="记录应急过程中的关键节点..." id="summary-input"></textarea>
|
||||
<div class="add-area__actions">
|
||||
<span class="add-area__count" id="char-count">0/500</span>
|
||||
<button class="add-area__btn" onclick="addSummary()">添加小结</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 二、救助结果 -->
|
||||
<div class="section" id="sec-result">
|
||||
<div class="section__header" onclick="toggleSection('sec-result')">
|
||||
<div class="section__title">📋 救助结果 <button class="edit-trigger" onclick="event.stopPropagation();toggleResultEdit()">编辑</button></div>
|
||||
<div class="section__arrow section__arrow--up" id="arrow-sec-result"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 4l4 4 4-4"/></svg></div>
|
||||
</div>
|
||||
<div class="section__body" id="body-sec-result">
|
||||
<div class="result-text" id="result-display">患者陈伟于14:30发出求助，主诉胸闷呼吸困难。经专业人员张旭远程初步判断为疑似心绞痛，建议立即转运。15:05救护车到达现场，患者意识清醒、生命体征基本平稳，已转运至采油三厂职工医院急诊科。到院后经心电图及血液检查，确诊为不稳定型心绞痛，目前已收治入院观察治疗，病情稳定。</div>
|
||||
<div class="result-edit-area" id="result-edit">
|
||||
<textarea id="result-textarea"></textarea>
|
||||
<div class="result-edit-area__actions">
|
||||
<button class="result-edit-area__btn result-edit-area__btn--cancel" onclick="cancelResultEdit()">取消</button>
|
||||
<button class="result-edit-area__btn result-edit-area__btn--save" onclick="saveResult()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 三、相关照片 -->
|
||||
<div class="section" id="sec-photo">
|
||||
<div class="section__header" onclick="toggleSection('sec-photo')">
|
||||
<div class="section__title">📷 相关照片 <span class="section__count" id="photo-count">（3张）</span></div>
|
||||
<div class="section__arrow section__arrow--up" id="arrow-sec-photo"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 4l4 4 4-4"/></svg></div>
|
||||
</div>
|
||||
<div class="section__body" id="body-sec-photo">
|
||||
<div class="photo-grid" id="photo-grid">
|
||||
<!-- 示意占位图 -->
|
||||
<div class="photo-item">
|
||||
<div style="width:100%;height:100%;background:linear-gradient(135deg,#e6f4ff,#bae0ff);display:flex;align-items:center;justify-content:center;font-size:28px;">🚑</div>
|
||||
<button class="photo-item__del" onclick="delPhoto(this)">✕</button>
|
||||
</div>
|
||||
<div class="photo-item">
|
||||
<div style="width:100%;height:100%;background:linear-gradient(135deg,#fff7e6,#ffe7ba);display:flex;align-items:center;justify-content:center;font-size:28px;">📄</div>
|
||||
<button class="photo-item__del" onclick="delPhoto(this)">✕</button>
|
||||
</div>
|
||||
<div class="photo-item">
|
||||
<div style="width:100%;height:100%;background:linear-gradient(135deg,#f6ffed,#d9f7be);display:flex;align-items:center;justify-content:center;font-size:28px;">🏥</div>
|
||||
<button class="photo-item__del" onclick="delPhoto(this)">✕</button>
|
||||
</div>
|
||||
<!-- [交互] 点击上传照片 -->
|
||||
<div class="photo-add" onclick="uploadPhoto()">
|
||||
<span class="photo-add__icon">+</span>
|
||||
<span>上传</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:20px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
/* 折叠/展开 */
|
||||
function toggleSection(secId) {
|
||||
var body = document.getElementById('body-' + secId);
|
||||
var arrow = document.getElementById('arrow-' + secId);
|
||||
body.classList.toggle('section__body--hidden');
|
||||
arrow.classList.toggle('section__arrow--up');
|
||||
}
|
||||
|
||||
/* 补充小结 - 字数统计 */
|
||||
var input = document.getElementById('summary-input');
|
||||
var countEl = document.getElementById('char-count');
|
||||
input.addEventListener('input', function() {
|
||||
countEl.textContent = input.value.length + '/500';
|
||||
});
|
||||
|
||||
/* 补充小结 - 新增 */
|
||||
function addSummary() {
|
||||
var text = input.value.trim();
|
||||
if (!text) { alert('请输入小结内容'); return; }
|
||||
alert('小结已添加');
|
||||
input.value = '';
|
||||
countEl.textContent = '0/500';
|
||||
}
|
||||
|
||||
/* 补充小结 - 编辑/删除 */
|
||||
function editSummary(btn) { alert('进入编辑模式（原型演示）'); }
|
||||
function delSummary(btn) {
|
||||
if (confirm('确认删除该条小结？')) {
|
||||
btn.closest('.summary-item').remove();
|
||||
var count = document.querySelectorAll('#summary-list .summary-item').length;
|
||||
document.getElementById('summary-count').textContent = '（' + count + '条）';
|
||||
}
|
||||
}
|
||||
|
||||
/* 救助结果 - 编辑 */
|
||||
function toggleResultEdit() {
|
||||
var display = document.getElementById('result-display');
|
||||
var editArea = document.getElementById('result-edit');
|
||||
var textarea = document.getElementById('result-textarea');
|
||||
textarea.value = display.textContent;
|
||||
display.style.display = 'none';
|
||||
editArea.style.display = 'block';
|
||||
textarea.focus();
|
||||
}
|
||||
function cancelResultEdit() {
|
||||
document.getElementById('result-display').style.display = '';
|
||||
document.getElementById('result-edit').style.display = 'none';
|
||||
}
|
||||
function saveResult() {
|
||||
var textarea = document.getElementById('result-textarea');
|
||||
var display = document.getElementById('result-display');
|
||||
var text = textarea.value.trim();
|
||||
if (text) {
|
||||
display.textContent = text;
|
||||
display.classList.remove('result-text--empty');
|
||||
} else {
|
||||
display.textContent = '暂无救助结果，点击编辑填写';
|
||||
display.classList.add('result-text--empty');
|
||||
}
|
||||
cancelResultEdit();
|
||||
}
|
||||
|
||||
/* 相关照片 - 上传/删除 */
|
||||
function uploadPhoto() { alert('选择照片上传（原型演示）'); }
|
||||
function delPhoto(btn) {
|
||||
if (confirm('确认删除该照片？')) {
|
||||
btn.closest('.photo-item').remove();
|
||||
var count = document.querySelectorAll('#photo-grid .photo-item').length;
|
||||
document.getElementById('photo-count').textContent = '（' + count + '张）';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #999; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; line-height: 1.8; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.info-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.info-card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.info-card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.info-card__body { padding: 0 16px 16px; }
|
||||
.info-card--collapsed .info-card__body { display: none; }
|
||||
.info-card--collapsed .info-card__arrow { transform: rotate(-90deg); }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">员工取消</div>
|
||||
<div class="status-area__desc">取消时间：2026-04-24 10:15:00</div>
|
||||
<div class="status-area__desc">取消原因：个人原因推迟就诊</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="employee-card">
|
||||
<div class="info-card__header" onclick="toggleInfoCard('employee-card', this)">
|
||||
<div class="info-card__title">申请员工信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">姓名</span><span class="info-card__value">张磊</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">性别</span><span class="info-card__value">男</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">年龄</span><span class="info-card__value">46岁</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">员工编号</span><span class="info-card__value">CY3-20100112</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属单位</span><span class="info-card__value">采油三厂</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属部门</span><span class="info-card__value">第一作业区</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">联系电话</span><span class="info-card__value">136-7788-4455</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">身份证</span><span class="info-card__value">610105198001XXXXXX</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="booking-card">
|
||||
<div class="info-card__header" onclick="toggleInfoCard('booking-card', this)">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">宝石花医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">内分泌科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">刘芳</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">普通号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-04-26 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">糖尿病血糖控制不佳，需复查调药</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleInfoCard(cardId, trigger) {
|
||||
var card = document.getElementById(cardId);
|
||||
if (!card) return;
|
||||
card.classList.toggle('info-card--collapsed');
|
||||
var text = trigger.querySelector('.info-card__toggle span');
|
||||
if (text) text.textContent = card.classList.contains('info-card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #1677ff; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.info-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.info-card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.info-card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.info-card__body { padding: 0 16px 16px; }
|
||||
.info-card--collapsed .info-card__body { display: none; }
|
||||
.info-card--collapsed .info-card__arrow { transform: rotate(-90deg); }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
.bottom-btns { padding: 12px 16px 28px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 12px; }
|
||||
.bottom-btns__btn { flex: 1; height: 44px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
|
||||
.bottom-btns__btn--cancel { background: #fff; color: #ff4d4f; border: 1px solid #ff4d4f; }
|
||||
.bottom-btns__btn--primary { background: #1677ff; color: #fff; }
|
||||
.modal-mask { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center; }
|
||||
.modal-mask--show { display: flex; }
|
||||
.modal { background: #fff; border-radius: 16px; width: 300px; padding: 24px; text-align: center; }
|
||||
.modal__title { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-bottom: 20px; }
|
||||
.modal__btns { display: flex; gap: 12px; }
|
||||
.modal__btn { flex: 1; height: 40px; border-radius: 20px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; }
|
||||
.modal__btn--cancel { background: #f5f5f5; color: #666; }
|
||||
.modal__btn--confirm { background: #ff4d4f; color: #fff; }
|
||||
.modal__btn--confirm.disabled { background: #ffb3b3; pointer-events: none; }
|
||||
.modal__textarea { width: 100%; height: 80px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 10px; font-size: 14px; resize: none; margin-bottom: 16px; font-family: inherit; }
|
||||
.modal__textarea::placeholder { color: #bbb; }
|
||||
.modal__textarea:focus { outline: none; border-color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">已确认</div>
|
||||
<div class="status-area__desc">已派单至驻场人员(赵强)</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="employee-card">
|
||||
<div class="info-card__header" onclick="toggleInfoCard('employee-card', this)">
|
||||
<div class="info-card__title">申请员工信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">姓名</span><span class="info-card__value">李建华</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">性别</span><span class="info-card__value">男</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">年龄</span><span class="info-card__value">55岁</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">员工编号</span><span class="info-card__value">CY2-20120089</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属单位</span><span class="info-card__value">采油二厂</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属部门</span><span class="info-card__value">综合管理部</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">联系电话</span><span class="info-card__value">139-8810-3345</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">身份证</span><span class="info-card__value">610103197105XXXXXX</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="booking-card">
|
||||
<div class="info-card__header" onclick="toggleInfoCard('booking-card', this)">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">心血管内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">赵伟民</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-04-26 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">冠心病反复胸闷，需专家评估治疗方案</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-btns">
|
||||
<button class="bottom-btns__btn bottom-btns__btn--cancel" onclick="document.getElementById('cancelModal').classList.add('modal-mask--show')">取消预约</button>
|
||||
<button class="bottom-btns__btn bottom-btns__btn--primary">联系驻场人员</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-mask" id="cancelModal">
|
||||
<div class="modal">
|
||||
<div class="modal__title">确认取消该预约？</div>
|
||||
<textarea class="modal__textarea" id="cancelReason" placeholder="请输入取消原因" oninput="document.getElementById('confirmCancelBtn').classList.toggle('disabled', !this.value.trim())"></textarea>
|
||||
<div class="modal__btns">
|
||||
<button class="modal__btn modal__btn--cancel" onclick="document.getElementById('cancelModal').classList.remove('modal-mask--show')">再想想</button>
|
||||
<button class="modal__btn modal__btn--confirm disabled" id="confirmCancelBtn" onclick="location.href='./serious-illness-list.html'">确认取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleInfoCard(cardId, trigger) {
|
||||
var card = document.getElementById(cardId);
|
||||
if (!card) return;
|
||||
card.classList.toggle('info-card--collapsed');
|
||||
var text = trigger.querySelector('.info-card__toggle span');
|
||||
if (text) text.textContent = card.classList.contains('info-card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #52c41a; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.info-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.info-card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.info-card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.info-card__body { padding: 0 16px 16px; }
|
||||
.info-card--collapsed .info-card__body { display: none; }
|
||||
.info-card--collapsed .info-card__arrow { transform: rotate(-90deg); }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
.bottom-bar { padding: 12px 16px 28px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.btn-primary { width: 100%; height: 44px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; background: #1677ff; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">已完成</div>
|
||||
<div class="status-area__desc">驻场人员(孙磊)已完成挂号</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="employee-card">
|
||||
<div class="info-card__header" onclick="toggleInfoCard('employee-card', this)">
|
||||
<div class="info-card__title">申请员工信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">姓名</span><span class="info-card__value">冯凯</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">性别</span><span class="info-card__value">男</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">年龄</span><span class="info-card__value">38岁</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">员工编号</span><span class="info-card__value">CY4-20150321</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属单位</span><span class="info-card__value">采油四厂</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属部门</span><span class="info-card__value">第三作业区</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">联系电话</span><span class="info-card__value">137-0012-8899</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">身份证</span><span class="info-card__value">610104198803XXXXXX</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="booking-card">
|
||||
<div class="info-card__header" onclick="toggleInfoCard('booking-card', this)">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">长庆油田职工医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">骨科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">陈志远</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">普通号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-04-24 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">腰椎间盘突出压迫神经，行走困难需复查</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="result-card">
|
||||
<div class="info-card__header" onclick="toggleInfoCard('result-card', this)">
|
||||
<div class="info-card__title">挂号结果</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">就诊科室</span><span class="info-card__value">骨科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊医生</span><span class="info-card__value">陈志远</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊时段</span><span class="info-card__value">2026-04-24 09:00–09:20</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">排队序号</span><span class="info-card__value">05</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">就诊医院</span><span class="info-card__value">长庆油田职工医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">普通号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">备注</span><span class="info-card__value">复查结果正常</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-bar">
|
||||
<button class="btn-primary">联系驻场人员</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleInfoCard(cardId, trigger) {
|
||||
var card = document.getElementById(cardId);
|
||||
if (!card) return;
|
||||
card.classList.toggle('info-card--collapsed');
|
||||
var text = trigger.querySelector('.info-card__toggle span');
|
||||
if (text) text.textContent = card.classList.contains('info-card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,259 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #fa8c16; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.info-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.info-card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.info-card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.info-card__body { padding: 0 16px 16px; }
|
||||
.info-card--collapsed .info-card__body { display: none; }
|
||||
.info-card--collapsed .info-card__arrow { transform: rotate(-90deg); }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
.info-card__row:last-child { border-bottom: none; }
|
||||
.info-card__label { color: #999; }
|
||||
.info-card__value { color: #333; font-weight: 500; }
|
||||
.bottom-btns { padding: 12px 16px 28px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 12px; }
|
||||
.bottom-btns__btn { flex: 1; height: 44px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
|
||||
.bottom-btns__btn--cancel { background: #fff; color: #ff4d4f; border: 1px solid #ff4d4f; }
|
||||
.bottom-btns__btn--primary { background: #1677ff; color: #fff; }
|
||||
.modal-mask { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center; }
|
||||
.modal-mask--show { display: flex; }
|
||||
.modal { background: #fff; border-radius: 16px; width: 300px; padding: 24px; text-align: center; }
|
||||
.modal__title { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-bottom: 20px; }
|
||||
.modal__btns { display: flex; gap: 12px; }
|
||||
.modal__btn { flex: 1; height: 40px; border-radius: 20px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; }
|
||||
.modal__btn--cancel { background: #f5f5f5; color: #666; }
|
||||
.modal__btn--confirm { background: #ff4d4f; color: #fff; }
|
||||
.modal__btn--confirm.disabled { background: #ffb3b3; pointer-events: none; }
|
||||
.modal__btn--primary { background: #1677ff; color: #fff; }
|
||||
.modal__btn--primary.disabled { background: #a0c4ff; pointer-events: none; }
|
||||
.modal__textarea { width: 100%; height: 80px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 10px; font-size: 14px; resize: none; margin-bottom: 16px; font-family: inherit; }
|
||||
.modal__textarea::placeholder { color: #bbb; }
|
||||
.modal__textarea:focus { outline: none; border-color: #1677ff; }
|
||||
.modal__field-label { font-size: 13px; color: #666; margin-bottom: 6px; text-align: left; display: flex; align-items: center; gap: 3px; }
|
||||
.modal__field-label .required { color: #ff4d4f; }
|
||||
.modal__field { margin-bottom: 14px; }
|
||||
.person-select { position: relative; }
|
||||
.person-select__input { width: 100%; height: 38px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 0 32px 0 10px; font-size: 13px; outline: none; color: #1a1a1a; background: #fff; }
|
||||
.person-select__input:focus { border-color: #1677ff; }
|
||||
.person-select__input::placeholder { color: #bbb; }
|
||||
.person-select__arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; transition: transform .2s; }
|
||||
.person-select.open .person-select__arrow { transform: translateY(-50%) rotate(180deg); }
|
||||
.person-select__dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); overflow: hidden; z-index: 30; }
|
||||
.person-select.open .person-select__dropdown { display: block; }
|
||||
.person-options { max-height: 180px; overflow-y: auto; }
|
||||
.person-options::-webkit-scrollbar { width: 4px; }
|
||||
.person-options::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); border-radius: 999px; }
|
||||
.person-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
|
||||
.person-option:last-child { border-bottom: none; }
|
||||
.person-option:hover { background: #f0f5ff; }
|
||||
.person-option.selected { background: #e6f4ff; }
|
||||
.person-option.is-hidden { display: none; }
|
||||
.person-option__info { flex: 1; min-width: 0; }
|
||||
.person-option__name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.person-option__meta { font-size: 11px; color: #666; margin-top: 2px; }
|
||||
.person-option__status { font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600; flex-shrink: 0; }
|
||||
.person-option__status--online { background: #f6ffed; color: #52c41a; }
|
||||
.person-option__status--busy { background: #fff7e6; color: #fa8c16; }
|
||||
.person-empty { display: none; padding: 14px 12px; text-align: center; font-size: 12px; color: #999; }
|
||||
.person-empty.show { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">就医详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">待确认</div>
|
||||
<div class="status-area__desc">请尽快确认预约信息并安排驻场人员</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="employee-card">
|
||||
<div class="info-card__header" onclick="toggleInfoCard('employee-card', this)">
|
||||
<div class="info-card__title">申请员工信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">姓名</span><span class="info-card__value">周敏</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">性别</span><span class="info-card__value">女</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">年龄</span><span class="info-card__value">42岁</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">员工编号</span><span class="info-card__value">CY3-20180156</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属单位</span><span class="info-card__value">采油三厂</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">所属部门</span><span class="info-card__value">第二作业区</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">联系电话</span><span class="info-card__value">138-9201-5567</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">身份证</span><span class="info-card__value">610102198401XXXXXX</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="booking-card">
|
||||
<div class="info-card__header" onclick="toggleInfoCard('booking-card', this)">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__toggle"><span>收起</span><svg class="info-card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">心血管内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">李建国</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-04-28 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">心脏瓣膜病变加重，需专家会诊评估手术方案</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-btns">
|
||||
<button class="bottom-btns__btn bottom-btns__btn--cancel" onclick="document.getElementById('cancelModal').classList.add('modal-mask--show')">取消预约</button>
|
||||
<button class="bottom-btns__btn bottom-btns__btn--primary" onclick="document.getElementById('confirmModal').classList.add('modal-mask--show')">确认预约</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-mask" id="confirmModal">
|
||||
<div class="modal" style="width:320px;">
|
||||
<div class="modal__title">确认预约并派单</div>
|
||||
<div class="modal__field">
|
||||
<div class="modal__field-label"><span class="required">*</span>选择驻场人员</div>
|
||||
<div id="personSelect" class="person-select">
|
||||
<div style="position:relative;">
|
||||
<input id="personSearch" class="person-select__input" type="text" placeholder="搜索姓名或医院" autocomplete="off" onclick="openPersonDrop()" onfocus="openPersonDrop()" oninput="filterPersons()" />
|
||||
<span class="person-select__arrow"><svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2 4.5L6 8l4-3.5"/></svg></span>
|
||||
</div>
|
||||
<div class="person-select__dropdown" id="personDropdown">
|
||||
<div class="person-options" id="personOptions">
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="赵强" data-hospital="宝石花医院" data-phone="185-2236-6695" data-status="空闲" data-status-type="online">
|
||||
<div class="person-option__info"><div class="person-option__name">赵强</div><div class="person-option__meta">宝石花医院 · 185-2236-6695</div></div>
|
||||
<span class="person-option__status person-option__status--online">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="孙磊" data-hospital="宝石花医院" data-phone="139-8810-2233" data-status="空闲" data-status-type="online">
|
||||
<div class="person-option__info"><div class="person-option__name">孙磊</div><div class="person-option__meta">宝石花医院 · 139-8810-2233</div></div>
|
||||
<span class="person-option__status person-option__status--online">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="王希" data-hospital="长庆油田职工医院" data-phone="138-9201-3001" data-status="有派单" data-status-type="busy">
|
||||
<div class="person-option__info"><div class="person-option__name">王希</div><div class="person-option__meta">长庆油田职工医院 · 138-9201-3001</div></div>
|
||||
<span class="person-option__status person-option__status--busy">有派单</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="刘涛" data-hospital="华池县人民医院" data-phone="137-0012-5588" data-status="有派单" data-status-type="busy">
|
||||
<div class="person-option__info"><div class="person-option__name">刘涛</div><div class="person-option__meta">华池县人民医院 · 137-0012-5588</div></div>
|
||||
<span class="person-option__status person-option__status--busy">有派单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="personEmpty" class="person-empty">未搜索到匹配的驻场人员</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__btns">
|
||||
<button class="modal__btn modal__btn--cancel" onclick="closeConfirmModal()">取消</button>
|
||||
<button class="modal__btn modal__btn--primary disabled" id="confirmBookBtn" onclick="doConfirmBooking()">确认派单</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-mask" id="cancelModal">
|
||||
<div class="modal">
|
||||
<div class="modal__title">确认取消该预约？</div>
|
||||
<textarea class="modal__textarea" id="cancelReason" placeholder="请输入取消原因" oninput="document.getElementById('confirmCancelBtn').classList.toggle('disabled', !this.value.trim())"></textarea>
|
||||
<div class="modal__btns">
|
||||
<button class="modal__btn modal__btn--cancel" onclick="document.getElementById('cancelModal').classList.remove('modal-mask--show')">再想想</button>
|
||||
<button class="modal__btn modal__btn--confirm disabled" id="confirmCancelBtn" onclick="location.href='./serious-illness-list.html'">确认取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleInfoCard(cardId, trigger) {
|
||||
var card = document.getElementById(cardId);
|
||||
if (!card) return;
|
||||
card.classList.toggle('info-card--collapsed');
|
||||
var text = trigger.querySelector('.info-card__toggle span');
|
||||
if (text) text.textContent = card.classList.contains('info-card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
|
||||
var selectedPerson = null;
|
||||
|
||||
function openPersonDrop() {
|
||||
document.getElementById('personSelect').classList.add('open');
|
||||
}
|
||||
function closePersonDrop() {
|
||||
document.getElementById('personSelect').classList.remove('open');
|
||||
}
|
||||
|
||||
function selectPerson(el) {
|
||||
document.querySelectorAll('#personOptions .person-option').forEach(function(item) { item.classList.remove('selected'); });
|
||||
el.classList.add('selected');
|
||||
selectedPerson = el.getAttribute('data-name');
|
||||
document.getElementById('personSearch').value = selectedPerson;
|
||||
closePersonDrop();
|
||||
document.getElementById('confirmBookBtn').classList.remove('disabled');
|
||||
}
|
||||
|
||||
function filterPersons() {
|
||||
var keyword = document.getElementById('personSearch').value.trim().toLowerCase();
|
||||
var items = document.querySelectorAll('#personOptions .person-option');
|
||||
var visible = 0;
|
||||
items.forEach(function(item) {
|
||||
var name = (item.getAttribute('data-name') || '').toLowerCase();
|
||||
var hospital = (item.getAttribute('data-hospital') || '').toLowerCase();
|
||||
var matched = !keyword || name.indexOf(keyword) > -1 || hospital.indexOf(keyword) > -1;
|
||||
item.classList.toggle('is-hidden', !matched);
|
||||
if (matched) visible++;
|
||||
});
|
||||
document.getElementById('personEmpty').classList.toggle('show', visible === 0);
|
||||
openPersonDrop();
|
||||
if (!keyword) { selectedPerson = null; document.getElementById('confirmBookBtn').classList.add('disabled'); }
|
||||
}
|
||||
|
||||
function closeConfirmModal() {
|
||||
document.getElementById('confirmModal').classList.remove('modal-mask--show');
|
||||
}
|
||||
|
||||
function doConfirmBooking() {
|
||||
if (!selectedPerson) return;
|
||||
location.href = './serious-illness-list.html';
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
var sel = document.getElementById('personSelect');
|
||||
if (sel && !sel.contains(e.target)) {
|
||||
if (selectedPerson) document.getElementById('personSearch').value = selectedPerson;
|
||||
closePersonDrop();
|
||||
}
|
||||
});
|
||||
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,241 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.primary-tabs { display: flex; gap: 8px; padding: 12px 16px 8px; background: #f7f8fa; }
|
||||
.primary-tab { flex: 1; height: 38px; border-radius: 19px; background: #fff; color: #666; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); border: 1px solid transparent; text-decoration: none; }
|
||||
.primary-tab.active { color: #1677ff; border-color: #b7d8ff; background: #e6f4ff; }
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
.content-panel { display: none; }
|
||||
.content-panel.active { display: block; }
|
||||
.section-title { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 8px; }
|
||||
.section-title-main { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.section-title-sub { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.link-text { font-size: 12px; color: #1677ff; cursor: pointer; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 0 16px 10px; padding: 16px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform .15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__hospital { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.card__status--pending { background: #fff7e6; color: #fa8c16; }
|
||||
.card__status--confirmed { background: #e6f7ff; color: #1677ff; }
|
||||
.card__status--done { background: #f6ffed; color: #52c41a; }
|
||||
.card__status--self-cancel { background: #fff7e6; color: #fa8c16; }
|
||||
.card__status--admin-cancel { background: #fff1f0; color: #ff4d4f; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info .card__employee { color: #1a1a1a; font-weight: 500; }
|
||||
.card__tip { font-size: 12px; color: #999; margin-top: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，李明</div>
|
||||
<div style="color:rgba(255,255,255,0.82);font-size:12px;margin-bottom:4px;">所属应急中心：西安应急中心</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">工作台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">3</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">应急进行中</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">4</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">大病待确认</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一级Tab：应急求助(跳转) / 大病就医(当前) -->
|
||||
<div class="primary-tabs">
|
||||
<a class="primary-tab" href="./index.html">应急求助</a>
|
||||
<a class="primary-tab active" href="./serious-illness-list.html">大病就医</a>
|
||||
</div>
|
||||
|
||||
<!-- 二级Tab：待确认 / 已确认 / 已完成 -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-pending')">待确认<span class="badge">4</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-confirmed')">已确认</div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已完成</div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-cancelled')">已取消</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 待确认 -->
|
||||
<div id="panel-pending" class="content-panel active">
|
||||
<!-- <div class="section-title">-->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="section-title-main">待确认就医</div>-->
|
||||
<!-- <div class="section-title-sub">等待操作人员确认受理</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="link-text">共 4 条</div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-pending.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--pending">待确认</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">周敏 · 采油三厂 · 第二作业区</span></div>
|
||||
<div>科室：心血管内科</div>
|
||||
<div>医生：李建国</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-04-28</div>
|
||||
</div>
|
||||
<div class="card__tip">请尽快确认预约信息并安排驻场人员</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-pending.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">西安交大一附院</span>
|
||||
<span class="card__status card__status--pending">待确认</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">韩涛 · 采油五厂 · 第一作业区</span></div>
|
||||
<div>科室：肿瘤放疗科</div>
|
||||
<div>医生：王明辉</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-04-27</div>
|
||||
</div>
|
||||
<div class="card__tip">请尽快确认预约信息并安排驻场人员</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已确认 -->
|
||||
<div id="panel-confirmed" class="content-panel">
|
||||
<!-- <div class="section-title">-->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="section-title-main">已确认就医</div>-->
|
||||
<!-- <div class="section-title-sub">已确认方案，待线下执行</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="link-text">近 2 条</div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-confirmed.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--confirmed">已确认</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">李建华 · 采油二厂 · 综合管理部</span></div>
|
||||
<div>科室：心血管内科</div>
|
||||
<div>医生：赵伟民</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-04-26 14:00–14:20</div>
|
||||
</div>
|
||||
<div class="card__tip">已派单至驻场人员(赵强)</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已完成 -->
|
||||
<div id="panel-done" class="content-panel">
|
||||
<!-- <div class="section-title">-->
|
||||
<!-- <div>-->
|
||||
<!-- <div class="section-title-main">已完成就医</div>-->
|
||||
<!-- <div class="section-title-sub">就诊已结束并归档</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="link-text">近 1 条</div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-done.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">长庆油田职工医院</span>
|
||||
<span class="card__status card__status--done">已完成</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">冯凯 · 采油四厂 · 第三作业区</span></div>
|
||||
<div>就诊科室：骨科</div>
|
||||
<div>就诊医生：陈志远</div>
|
||||
<div>挂号类别：普通号</div>
|
||||
<div>就诊时段：2026-04-24 09:00–09:20 | 排队序号：05</div>
|
||||
</div>
|
||||
<div class="card__tip">驻场人员(孙磊)已完成挂号</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已取消 -->
|
||||
<div id="panel-cancelled" class="content-panel">
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-cancelled.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">宝石花医院</span>
|
||||
<span class="card__status card__status--self-cancel">员工取消</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">张磊 · 采油三厂 · 第一作业区</span></div>
|
||||
<div>科室：内分泌科</div>
|
||||
<div>医生：刘芳</div>
|
||||
<div>挂号类别：普通号</div>
|
||||
<div>期望预约时间：2026-04-26</div>
|
||||
</div>
|
||||
<div class="card__tip">取消原因：没时间了</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="location.href='./serious-illness-detail-cancelled.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">西安交大一附院</span>
|
||||
<span class="card__status card__status--self-cancel">管理人员取消</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>申请员工：<span class="card__employee">吴强 · 采油六厂 · 综合管理部</span></div>
|
||||
<div>科室：肝胆外科</div>
|
||||
<div>医生：孙海涛</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-04-25</div>
|
||||
</div>
|
||||
<div class="card__tip">取消原因：与员工协商了，员工说不用了</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">📡</span><span class="tab-label">工作台</span><span class="tab-badge">3</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
function switchTab(el, panelId) {
|
||||
el.parentElement.querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
document.querySelectorAll('.content-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
document.getElementById(panelId).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,455 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||||
.card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.card__body { padding: 0 16px 16px; }
|
||||
.card--collapsed .card__body { display: none; }
|
||||
.card--collapsed .card__arrow { transform: rotate(-90deg); }
|
||||
.card--collapsed .card__header { border-bottom: none; }
|
||||
.card__tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #1677ff; background: #e6f4ff; }
|
||||
.info-item { display: flex; font-size: 13px; line-height: 1.6; padding: 5px 0; }
|
||||
.info-item__label { color: #999; min-width: 72px; flex-shrink: 0; }
|
||||
.info-item__value { color: #333; flex: 1; word-break: break-all; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.location-link { color: #1677ff; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.desc-block { padding: 6px 0; }
|
||||
.desc-block__label { font-size: 13px; color: #999; margin-bottom: 6px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.form-textarea, .form-input { width: 100%; border: 1px solid #d9d9d9; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #333; background: #fff; outline: none; }
|
||||
.form-textarea:focus, .form-input:focus { border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22,119,255,0.12); }
|
||||
.form-textarea { min-height: 82px; resize: none; line-height: 1.7; }
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 8px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; }
|
||||
.photo-item__mask { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,0.42); color: #fff; font-size: 10px; text-align: center; padding: 3px 0; }
|
||||
.photo-add { width: 90px; height: 68px; border-radius: 8px; border: 1px dashed #91caff; background: #f7fbff; color: #1677ff; font-size: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
|
||||
.photo-add span:first-child { font-size: 18px; line-height: 1; }
|
||||
.result-toolbar, .summary-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.result-action-btn { height: 30px; padding: 0 12px; border: none; border-radius: 8px; background: #e6f4ff; color: #1677ff; font-size: 12px; font-weight: 600; cursor: pointer; }
|
||||
.result-empty { border: 1px dashed #d9d9d9; border-radius: 10px; background: #fafafa; color: #999; font-size: 13px; line-height: 1.7; padding: 12px; }
|
||||
.result-filled { border: 1px solid #e8e8e8; border-radius: 10px; background: #fafafa; color: #333; font-size: 13px; line-height: 1.7; padding: 12px; white-space: pre-line; }
|
||||
.summary-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.summary-add-btn, .summary-edit-btn { border: none; border-radius: 8px; font-size: 12px; cursor: pointer; }
|
||||
.summary-add-btn { height: 30px; padding: 0 12px; background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.summary-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.summary-item { border: 1px solid #e8e8e8; border-radius: 10px; background: #fafafa; padding: 10px 12px; }
|
||||
.summary-item__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||||
.summary-item__idx { font-size: 12px; font-weight: 600; color: #1677ff; }
|
||||
.summary-edit-btn { height: 26px; padding: 0 10px; background: #fff; color: #666; border: 1px solid #d9d9d9; }
|
||||
.summary-delete-btn { height: 26px; padding: 0 10px; background: #fff; color: #ff4d4f; border: 1px solid #ffa39e; border-radius: 8px; font-size: 12px; cursor: pointer; }
|
||||
.summary-item__text { font-size: 13px; color: #333; line-height: 1.7; white-space: pre-line; }
|
||||
.action-row { display: flex; justify-content: flex-end; margin-top: 12px; }
|
||||
.save-btn { height: 36px; border: none; border-radius: 8px; background: #1677ff; color: #fff; font-size: 13px; font-weight: 600; padding: 0 18px; cursor: pointer; }
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 0 12px; }
|
||||
.empty-state__icon { font-size: 36px; margin-bottom: 8px; opacity: .35; }
|
||||
.empty-state__text { font-size: 13px; color: #bbb; }
|
||||
.tip-text { margin-top: 8px; font-size: 12px; color: #999; line-height: 1.6; }
|
||||
.dialog-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 30; }
|
||||
.dialog-mask.show { display: flex; }
|
||||
.dialog { width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
|
||||
.dialog__header { padding: 16px 18px 10px; font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.dialog__body { padding: 0 18px 18px; }
|
||||
.dialog__hint { font-size: 12px; color: #999; line-height: 1.6; margin-bottom: 10px; }
|
||||
.dialog__footer { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.dialog__btn { flex: 1; height: 46px; border: none; background: #fff; font-size: 14px; cursor: pointer; }
|
||||
.dialog__btn + .dialog__btn { border-left: 1px solid #f0f0f0; }
|
||||
.dialog__btn--primary { color: #1677ff; font-weight: 600; }
|
||||
.ambulance-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.ambulance-action-btn { height: 30px; padding: 0 12px; border: none; border-radius: 8px; background: #e6f4ff; color: #1677ff; font-size: 12px; font-weight: 600; cursor: pointer; }
|
||||
.ambulance-display { border: 1px solid #e8e8e8; border-radius: 10px; background: #fafafa; padding: 12px; }
|
||||
.ambulance-display__row { display: flex; gap: 8px; margin-bottom: 6px; font-size: 13px; line-height: 1.7; }
|
||||
.ambulance-display__row:last-child { margin-bottom: 0; }
|
||||
.ambulance-display__label { width: 72px; flex-shrink: 0; color: #999; }
|
||||
.ambulance-display__value { flex: 1; color: #333; }
|
||||
.option-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
|
||||
.option-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e8e8e8; border-radius: 10px; background: #fff; cursor: pointer; }
|
||||
.option-item.selected { border-color: #1677ff; background: #f0f7ff; }
|
||||
.option-item.is-hidden { display: none; }
|
||||
.option-item__check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d9d9d9; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
|
||||
.option-item.selected .option-item__check { border-color: #1677ff; background: #1677ff; }
|
||||
.option-item.selected .option-item__check::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
|
||||
.option-item__main { flex: 1; min-width: 0; }
|
||||
.option-item__title { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.option-item__meta { margin-top: 2px; font-size: 12px; color: #999; }
|
||||
.option-item__dist { font-size: 12px; color: #1677ff; font-weight: 600; flex-shrink: 0; }
|
||||
.search-box { margin-bottom: 10px; }
|
||||
.search-input { width: 100%; height: 36px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 0 12px 0 36px; font-size: 13px; color: #333; background: #fff url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2214%22 height=%2214%22 fill=%22none%22%3E%3Ccircle cx=%226%22 cy=%226%22 r=%224%22 stroke=%22%23999%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M10 10l2.5 2.5%22 stroke=%22%23999%22 stroke-width=%221.4%22 stroke-linecap=%22round%22/%3E%3C/svg%3E') no-repeat 12px center; outline: none; }
|
||||
.search-input:focus { border-color: #1677ff; }
|
||||
.dialog-field { margin-bottom: 12px; }
|
||||
.dialog-field:last-child { margin-bottom: 0; }
|
||||
.dialog-field__label { font-size: 12px; color: #666; margin-bottom: 4px; }
|
||||
.dialog-field__input { width: 100%; height: 36px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 0 12px; font-size: 13px; color: #333; outline: none; }
|
||||
.dialog-field__input:focus { border-color: #1677ff; }
|
||||
.dialog-field__textarea { width: 100%; min-height: 60px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #333; outline: none; resize: none; font-family: inherit; line-height: 1.6; }
|
||||
.dialog-field__textarea:focus { border-color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./emergency-chat.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">工单详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="card" id="basic-info-card">
|
||||
<div class="card__header" onclick="toggleCard('basic-info-card', this)">
|
||||
<div class="card__title">基本信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">工单编号</span><span class="info-item__value">YJ5633280</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单类型</span><span class="info-item__value">正常派单</span></div>
|
||||
<div class="info-item"><span class="info-item__label">应急中心</span><span class="info-item__value">西安应急中心</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助员工</span><span class="info-item__value">陈伟（EMP-71023）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value">采油一厂</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属部门</span><span class="info-item__value">第一作业区</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助方式</span><span class="info-item__value">应急视频</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-04-23 14:30:00</span></div>
|
||||
<div class="info-item"><span class="info-item__label">位置信息</span><span class="info-item__value"><span class="location-link"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省庆阳市华池县采油一厂作业区</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">操作人员</span><span class="info-item__value">刘旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">专业人员</span><span class="info-item__value">张旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单状态</span><span class="info-item__value"><span class="tag tag-blue">进行中</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="rescue-info-card">
|
||||
<div class="card__header" onclick="toggleCard('rescue-info-card', this)">
|
||||
<div class="card__title">救助信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助意见：</div>
|
||||
<div class="desc-block__text">建议患者保持制动，持续观察左膝肿胀情况，如疼痛加重需尽快转送医院进一步检查。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="result-toolbar">
|
||||
<div class="desc-block__label" style="margin-bottom:0;">救助结果：</div>
|
||||
<button class="result-action-btn" type="button" onclick="openResultDialog()">新增</button>
|
||||
</div>
|
||||
<div id="result-display" class="result-empty">暂未填写救助结果</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">相关照片：</div>
|
||||
<div class="photo-list" id="photo-list-ongoing">
|
||||
<div class="photo-item">现场照片 1<div class="photo-item__mask">点击替换</div></div>
|
||||
<div class="photo-item">现场照片 2<div class="photo-item__mask">点击替换</div></div>
|
||||
<button class="photo-add" onclick="addPhoto('photo-list-ongoing')" type="button"><span>＋</span><span>上传照片</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="summary-toolbar">
|
||||
<div class="desc-block__label" style="margin-bottom:0;">补充小结：</div>
|
||||
<button class="summary-add-btn" type="button" onclick="openSummaryDialog()">新增小结</button>
|
||||
</div>
|
||||
<div id="summary-list-ongoing" class="summary-list"></div>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<button class="save-btn" onclick="saveSection('救助信息')">保存救助信息</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="dispatch-info-card">
|
||||
<div class="card__header" onclick="toggleCard('dispatch-info-card', this)">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">📋</div>
|
||||
<div class="empty-state__text">暂无派单信息</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="ambulance-card">
|
||||
<div class="card__header" onclick="toggleCard('ambulance-card', this)">
|
||||
<div class="card__title">救护车支援</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="ambulance-toolbar">
|
||||
<div class="desc-block__label" style="margin-bottom:0;">支援详情</div>
|
||||
<!-- [交互] 点击跳转至: ./dispatch-ambulance.html -->
|
||||
<button class="ambulance-action-btn" type="button" onclick="location.href='./dispatch-ambulance.html'">编辑</button>
|
||||
</div>
|
||||
<div id="ambulance-display" class="ambulance-display">
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">车牌号</span><span id="amb-d-plate" class="ambulance-display__value">陕A·120-09</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">所属机构</span><span id="amb-d-hospital" class="ambulance-display__value">华池医疗点</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">驾驶人</span><span id="amb-d-driver" class="ambulance-display__value">李强</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">驾驶人电话</span><span id="amb-d-driverphone" class="ambulance-display__value">138-9101-2009</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">随行人</span><span id="amb-d-escort" class="ambulance-display__value">张伟</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">随行人电话</span><span id="amb-d-escortphone" class="ambulance-display__value">138-9201-5009</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">目的地</span><span id="amb-d-dest" class="ambulance-display__value">华池县人民医院急诊科</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">备注</span><span id="amb-d-remark" class="ambulance-display__value">患者左膝受伤，需担架转运</span></div>
|
||||
</div>
|
||||
<div class="tip-text">操作人员可点击编辑修改救护车支援信息。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="summary-dialog-mask" class="dialog-mask" onclick="closeSummaryDialog(event)">
|
||||
<div class="dialog">
|
||||
<div id="summary-dialog-title" class="dialog__header">新增补充小结</div>
|
||||
<div class="dialog__body">
|
||||
<div class="dialog__hint">支持输入多行文本，保存后会作为一条补充小结显示在列表中。</div>
|
||||
<textarea id="summary-dialog-input" class="form-textarea" placeholder="请输入补充小结内容"></textarea>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="dialog__btn" type="button" onclick="closeSummaryDialog(event)">取消</button>
|
||||
<button class="dialog__btn dialog__btn--primary" type="button" onclick="saveSummaryItem()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="result-dialog-mask" class="dialog-mask" onclick="closeResultDialog(event)">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">新增救助结果</div>
|
||||
<div class="dialog__body">
|
||||
<div class="dialog__hint">支持输入多行文本，保存后会展示在救助结果区域。</div>
|
||||
<textarea id="result-dialog-input" class="form-textarea" placeholder="请输入救助结果"></textarea>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="dialog__btn" type="button" onclick="closeResultDialog(event)">取消</button>
|
||||
<button class="dialog__btn dialog__btn--primary" type="button" onclick="saveResult()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 救护车编辑弹窗 -->
|
||||
<div id="ambulance-dialog-mask" class="dialog-mask" onclick="closeAmbulanceDialog(event)">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">编辑救护车支援</div>
|
||||
<div class="dialog__body" style="max-height:65vh;overflow-y:auto;">
|
||||
<div class="dialog__hint">搜索并选择救护车，选中后自动带出驾驶员信息，再填写随行人和目的地。</div>
|
||||
<div class="search-box">
|
||||
<input id="amb-dialog-search" class="search-input" type="text" placeholder="搜索车牌号或所属机构..." oninput="filterAmbOptions()" />
|
||||
</div>
|
||||
<div id="amb-option-list" class="option-list">
|
||||
<div class="option-item selected" onclick="selectAmbOption(this)" data-plate="陕A·120-09" data-hospital="华池医疗点" data-driver="李强" data-driverphone="138-9101-2009" data-dist="2.1km">
|
||||
<div class="option-item__check"></div>
|
||||
<div class="option-item__main"><div class="option-item__title">陕A·120-09</div><div class="option-item__meta">华池医疗点</div></div>
|
||||
<div class="option-item__dist">2.1km</div>
|
||||
</div>
|
||||
<div class="option-item" onclick="selectAmbOption(this)" data-plate="陕A·120E2" data-hospital="宝石花医院" data-driver="赵刚" data-driverphone="138-2210-8899" data-dist="5.6km">
|
||||
<div class="option-item__check"></div>
|
||||
<div class="option-item__main"><div class="option-item__title">陕A·120E2</div><div class="option-item__meta">宝石花医院</div></div>
|
||||
<div class="option-item__dist">5.6km</div>
|
||||
</div>
|
||||
<div class="option-item" onclick="selectAmbOption(this)" data-plate="甘M·120A3" data-hospital="华池县人民医院" data-driver="孙建国" data-driverphone="139-9021-3318" data-dist="10.2km">
|
||||
<div class="option-item__check"></div>
|
||||
<div class="option-item__main"><div class="option-item__title">甘M·120A3</div><div class="option-item__meta">华池县人民医院</div></div>
|
||||
<div class="option-item__dist">10.2km</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-field">
|
||||
<div class="dialog-field__label">随行人</div>
|
||||
<input id="amb-dialog-escort" class="dialog-field__input" type="text" value="张伟" />
|
||||
</div>
|
||||
<div class="dialog-field">
|
||||
<div class="dialog-field__label">随行人电话</div>
|
||||
<input id="amb-dialog-escortphone" class="dialog-field__input" type="text" value="138-9201-5009" />
|
||||
</div>
|
||||
<div class="dialog-field">
|
||||
<div class="dialog-field__label">目的地</div>
|
||||
<input id="amb-dialog-dest" class="dialog-field__input" type="text" value="华池县人民医院急诊科" />
|
||||
</div>
|
||||
<div class="dialog-field">
|
||||
<div class="dialog-field__label">备注信息</div>
|
||||
<textarea id="amb-dialog-remark" class="dialog-field__textarea" placeholder="请输入备注信息...">患者左膝受伤，需担架转运</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="dialog__btn" type="button" onclick="closeAmbulanceDialog(event)">取消</button>
|
||||
<button class="dialog__btn dialog__btn--primary" type="button" onclick="saveAmbulance()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
var summaryItems = [
|
||||
'接到求助后远程指导患者制动并冰敷左膝。',
|
||||
'已联系操作人员安排驻场人员前往现场协助转运。'
|
||||
];
|
||||
var editingSummaryIndex = -1;
|
||||
var resultText = '';
|
||||
|
||||
function saveSection(name) {
|
||||
alert(name + '已保存');
|
||||
}
|
||||
|
||||
function addPhoto(listId) {
|
||||
var list = document.getElementById(listId);
|
||||
var addBtn = list.querySelector('.photo-add');
|
||||
var count = list.querySelectorAll('.photo-item').length + 1;
|
||||
var item = document.createElement('div');
|
||||
item.className = 'photo-item';
|
||||
item.innerHTML = '现场照片 ' + count + '<div class="photo-item__mask">点击替换</div>';
|
||||
list.insertBefore(item, addBtn);
|
||||
}
|
||||
|
||||
function renderResult() {
|
||||
var el = document.getElementById('result-display');
|
||||
if (!resultText) {
|
||||
el.className = 'result-empty';
|
||||
el.textContent = '暂未填写救助结果';
|
||||
return;
|
||||
}
|
||||
el.className = 'result-filled';
|
||||
el.innerHTML = escapeHtml(resultText).replace(/\n/g, '<br>');
|
||||
}
|
||||
|
||||
function openResultDialog() {
|
||||
document.getElementById('result-dialog-input').value = resultText;
|
||||
document.getElementById('result-dialog-mask').classList.add('show');
|
||||
}
|
||||
|
||||
function closeResultDialog(event) {
|
||||
if (event && event.currentTarget !== event.target && event.target.className.indexOf('dialog__btn') === -1) return;
|
||||
document.getElementById('result-dialog-mask').classList.remove('show');
|
||||
}
|
||||
|
||||
function saveResult() {
|
||||
var input = document.getElementById('result-dialog-input');
|
||||
var value = input.value.trim();
|
||||
if (!value) {
|
||||
alert('请输入救助结果内容');
|
||||
return;
|
||||
}
|
||||
resultText = value;
|
||||
renderResult();
|
||||
closeResultDialog();
|
||||
}
|
||||
|
||||
function renderSummaryList() {
|
||||
var container = document.getElementById('summary-list-ongoing');
|
||||
container.innerHTML = '';
|
||||
for (var i = 0; i < summaryItems.length; i++) {
|
||||
var item = document.createElement('div');
|
||||
item.className = 'summary-item';
|
||||
item.innerHTML = '<div class="summary-item__top"><span class="summary-item__idx">小结 ' + (i + 1) + '</span><div style="display:flex;gap:6px;"><button class="summary-edit-btn" type="button" onclick="openSummaryDialog(' + i + ')">编辑</button><button class="summary-delete-btn" type="button" onclick="deleteSummaryItem(' + i + ')">删除</button></div></div><div class="summary-item__text">' + escapeHtml(summaryItems[i]).replace(/\n/g, '<br>') + '</div>';
|
||||
container.appendChild(item);
|
||||
}
|
||||
}
|
||||
|
||||
function openSummaryDialog(index) {
|
||||
editingSummaryIndex = typeof index === 'number' ? index : -1;
|
||||
document.getElementById('summary-dialog-title').textContent = editingSummaryIndex > -1 ? '编辑补充小结' : '新增补充小结';
|
||||
document.getElementById('summary-dialog-input').value = editingSummaryIndex > -1 ? summaryItems[editingSummaryIndex] : '';
|
||||
document.getElementById('summary-dialog-mask').classList.add('show');
|
||||
}
|
||||
|
||||
function closeSummaryDialog(event) {
|
||||
if (event && event.currentTarget !== event.target && event.target.className.indexOf('dialog__btn') === -1) return;
|
||||
document.getElementById('summary-dialog-mask').classList.remove('show');
|
||||
}
|
||||
|
||||
function deleteSummaryItem(index) {
|
||||
if (!confirm('确定删除小结 ' + (index + 1) + ' 吗？')) return;
|
||||
summaryItems.splice(index, 1);
|
||||
renderSummaryList();
|
||||
}
|
||||
|
||||
function saveSummaryItem() {
|
||||
var input = document.getElementById('summary-dialog-input');
|
||||
var value = input.value.trim();
|
||||
if (!value) {
|
||||
alert('请输入补充小结内容');
|
||||
return;
|
||||
}
|
||||
if (editingSummaryIndex > -1) summaryItems[editingSummaryIndex] = value;
|
||||
else summaryItems.push(value);
|
||||
renderSummaryList();
|
||||
closeSummaryDialog();
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
||||
}
|
||||
|
||||
renderResult();
|
||||
renderSummaryList();
|
||||
|
||||
/* 救护车编辑弹窗 */
|
||||
function openAmbulanceDialog() {
|
||||
document.getElementById('amb-dialog-search').value = '';
|
||||
filterAmbOptions();
|
||||
document.getElementById('ambulance-dialog-mask').classList.add('show');
|
||||
}
|
||||
function closeAmbulanceDialog(event) {
|
||||
if (event && event.currentTarget !== event.target && event.target.className.indexOf('dialog__btn') === -1) return;
|
||||
document.getElementById('ambulance-dialog-mask').classList.remove('show');
|
||||
}
|
||||
function selectAmbOption(el) {
|
||||
document.querySelectorAll('#amb-option-list .option-item').forEach(function(i) { i.classList.remove('selected'); });
|
||||
el.classList.add('selected');
|
||||
}
|
||||
function filterAmbOptions() {
|
||||
var kw = document.getElementById('amb-dialog-search').value.trim().toLowerCase();
|
||||
var items = Array.prototype.slice.call(document.querySelectorAll('#amb-option-list .option-item'));
|
||||
var visible = [];
|
||||
items.forEach(function(item) {
|
||||
var plate = (item.getAttribute('data-plate') || '').toLowerCase();
|
||||
var hospital = (item.getAttribute('data-hospital') || '').toLowerCase();
|
||||
var matched = !kw || plate.indexOf(kw) > -1 || hospital.indexOf(kw) > -1;
|
||||
item.classList.toggle('is-hidden', !matched);
|
||||
if (matched) visible.push(item);
|
||||
});
|
||||
var sel = document.querySelector('#amb-option-list .option-item.selected');
|
||||
if (!sel || sel.classList.contains('is-hidden')) {
|
||||
items.forEach(function(i) { i.classList.remove('selected'); });
|
||||
if (visible.length > 0) visible[0].classList.add('selected');
|
||||
}
|
||||
}
|
||||
function saveAmbulance() {
|
||||
var sel = document.querySelector('#amb-option-list .option-item.selected');
|
||||
if (!sel) { alert('请选择救护车'); return; }
|
||||
document.getElementById('amb-d-plate').textContent = sel.getAttribute('data-plate');
|
||||
document.getElementById('amb-d-hospital').textContent = sel.getAttribute('data-hospital');
|
||||
document.getElementById('amb-d-driver').textContent = sel.getAttribute('data-driver');
|
||||
document.getElementById('amb-d-driverphone').textContent = sel.getAttribute('data-driverphone');
|
||||
document.getElementById('amb-d-escort').textContent = document.getElementById('amb-dialog-escort').value.trim() || '-';
|
||||
document.getElementById('amb-d-escortphone').textContent = document.getElementById('amb-dialog-escortphone').value.trim() || '-';
|
||||
document.getElementById('amb-d-dest').textContent = document.getElementById('amb-dialog-dest').value.trim() || '-';
|
||||
document.getElementById('amb-d-remark').textContent = document.getElementById('amb-dialog-remark').value.trim() || '-';
|
||||
closeAmbulanceDialog();
|
||||
alert('救护车支援信息已保存');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,458 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||||
.card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.card__toggle { display: inline-flex; align-items: center; gap: 4px; color: #1677ff; font-size: 12px; font-weight: 600; }
|
||||
.card__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
|
||||
.card__body { padding: 0 16px 16px; }
|
||||
.card--collapsed .card__body { display: none; }
|
||||
.card--collapsed .card__arrow { transform: rotate(-90deg); }
|
||||
.card--collapsed .card__header { border-bottom: none; }
|
||||
.card__tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #1677ff; background: #e6f4ff; }
|
||||
.info-item { display: flex; font-size: 13px; line-height: 1.6; padding: 5px 0; }
|
||||
.info-item__label { color: #999; min-width: 72px; flex-shrink: 0; }
|
||||
.info-item__value { color: #333; flex: 1; word-break: break-all; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.location-link { color: #1677ff; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.desc-block { padding: 6px 0; }
|
||||
.desc-block__label { font-size: 13px; color: #999; margin-bottom: 6px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.form-textarea, .form-input { width: 100%; border: 1px solid #d9d9d9; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #333; background: #fff; outline: none; }
|
||||
.form-textarea:focus, .form-input:focus { border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22,119,255,0.12); }
|
||||
.form-textarea { min-height: 82px; resize: none; line-height: 1.7; }
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 8px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; }
|
||||
.photo-item__mask { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,0.42); color: #fff; font-size: 10px; text-align: center; padding: 3px 0; }
|
||||
.photo-add { width: 90px; height: 68px; border-radius: 8px; border: 1px dashed #91caff; background: #f7fbff; color: #1677ff; font-size: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
|
||||
.photo-add span:first-child { font-size: 18px; line-height: 1; }
|
||||
.result-toolbar, .summary-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.result-action-btn { height: 30px; padding: 0 12px; border: none; border-radius: 8px; background: #e6f4ff; color: #1677ff; font-size: 12px; font-weight: 600; cursor: pointer; }
|
||||
.result-empty { border: 1px dashed #d9d9d9; border-radius: 10px; background: #fafafa; color: #999; font-size: 13px; line-height: 1.7; padding: 12px; }
|
||||
.result-filled { border: 1px solid #e8e8e8; border-radius: 10px; background: #fafafa; color: #333; font-size: 13px; line-height: 1.7; padding: 12px; white-space: pre-line; }
|
||||
.summary-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.summary-add-btn, .summary-edit-btn { border: none; border-radius: 8px; font-size: 12px; cursor: pointer; }
|
||||
.summary-add-btn { height: 30px; padding: 0 12px; background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.summary-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.summary-item { border: 1px solid #e8e8e8; border-radius: 10px; background: #fafafa; padding: 10px 12px; }
|
||||
.summary-item__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||||
.summary-item__idx { font-size: 12px; font-weight: 600; color: #1677ff; }
|
||||
.summary-edit-btn { height: 26px; padding: 0 10px; background: #fff; color: #666; border: 1px solid #d9d9d9; }
|
||||
.summary-delete-btn { height: 26px; padding: 0 10px; background: #fff; color: #ff4d4f; border: 1px solid #ffa39e; border-radius: 8px; font-size: 12px; cursor: pointer; }
|
||||
.summary-item__text { font-size: 13px; color: #333; line-height: 1.7; white-space: pre-line; }
|
||||
.action-row { display: flex; justify-content: flex-end; margin-top: 12px; }
|
||||
.save-btn { height: 36px; border: none; border-radius: 8px; background: #1677ff; color: #fff; font-size: 13px; font-weight: 600; padding: 0 18px; cursor: pointer; }
|
||||
.tip-text { margin-top: 8px; font-size: 12px; color: #999; line-height: 1.6; }
|
||||
.dialog-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 30; }
|
||||
.dialog-mask.show { display: flex; }
|
||||
.dialog { width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
|
||||
.dialog__header { padding: 16px 18px 10px; font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.dialog__body { padding: 0 18px 18px; }
|
||||
.dialog__hint { font-size: 12px; color: #999; line-height: 1.6; margin-bottom: 10px; }
|
||||
.dialog__footer { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.dialog__btn { flex: 1; height: 46px; border: none; background: #fff; font-size: 14px; cursor: pointer; }
|
||||
.dialog__btn + .dialog__btn { border-left: 1px solid #f0f0f0; }
|
||||
.dialog__btn--primary { color: #1677ff; font-weight: 600; }
|
||||
.ambulance-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.ambulance-action-btn { height: 30px; padding: 0 12px; border: none; border-radius: 8px; background: #e6f4ff; color: #1677ff; font-size: 12px; font-weight: 600; cursor: pointer; }
|
||||
.ambulance-display { border: 1px solid #e8e8e8; border-radius: 10px; background: #fafafa; padding: 12px; }
|
||||
.ambulance-display__row { display: flex; gap: 8px; margin-bottom: 6px; font-size: 13px; line-height: 1.7; }
|
||||
.ambulance-display__row:last-child { margin-bottom: 0; }
|
||||
.ambulance-display__label { width: 72px; flex-shrink: 0; color: #999; }
|
||||
.ambulance-display__value { flex: 1; color: #333; }
|
||||
.option-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
|
||||
.option-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e8e8e8; border-radius: 10px; background: #fff; cursor: pointer; }
|
||||
.option-item.selected { border-color: #1677ff; background: #f0f7ff; }
|
||||
.option-item.is-hidden { display: none; }
|
||||
.option-item__check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d9d9d9; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
|
||||
.option-item.selected .option-item__check { border-color: #1677ff; background: #1677ff; }
|
||||
.option-item.selected .option-item__check::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
|
||||
.option-item__main { flex: 1; min-width: 0; }
|
||||
.option-item__title { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.option-item__meta { margin-top: 2px; font-size: 12px; color: #999; }
|
||||
.option-item__dist { font-size: 12px; color: #1677ff; font-weight: 600; flex-shrink: 0; }
|
||||
.search-box { margin-bottom: 10px; }
|
||||
.search-input { width: 100%; height: 36px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 0 12px 0 36px; font-size: 13px; color: #333; background: #fff url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2214%22 height=%2214%22 fill=%22none%22%3E%3Ccircle cx=%226%22 cy=%226%22 r=%224%22 stroke=%22%23999%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M10 10l2.5 2.5%22 stroke=%22%23999%22 stroke-width=%221.4%22 stroke-linecap=%22round%22/%3E%3C/svg%3E') no-repeat 12px center; outline: none; }
|
||||
.search-input:focus { border-color: #1677ff; }
|
||||
.dialog-field { margin-bottom: 12px; }
|
||||
.dialog-field:last-child { margin-bottom: 0; }
|
||||
.dialog-field__label { font-size: 12px; color: #666; margin-bottom: 4px; }
|
||||
.dialog-field__input { width: 100%; height: 36px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 0 12px; font-size: 13px; color: #333; outline: none; }
|
||||
.dialog-field__input:focus { border-color: #1677ff; }
|
||||
.dialog-field__textarea { width: 100%; min-height: 60px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #333; outline: none; resize: none; font-family: inherit; line-height: 1.6; }
|
||||
.dialog-field__textarea:focus { border-color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./emergency-chat-done.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat-done.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">工单详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="card" id="basic-info-card">
|
||||
<div class="card__header" onclick="toggleCard('basic-info-card', this)">
|
||||
<div class="card__title">基本信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">工单编号</span><span class="info-item__value">YJ5633256</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单类型</span><span class="info-item__value">正常派单</span></div>
|
||||
<div class="info-item"><span class="info-item__label">应急中心</span><span class="info-item__value">西安应急中心</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助员工</span><span class="info-item__value">王旭（EMP-56985）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value">公司机关</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属部门</span><span class="info-item__value">健康科</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助方式</span><span class="info-item__value">应急视频</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-03-21 15:12:21</span></div>
|
||||
<div class="info-item"><span class="info-item__label">位置信息</span><span class="info-item__value"><span class="location-link"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省西安市雁塔区电子一路56号</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">操作人员</span><span class="info-item__value">刘旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">专业人员</span><span class="info-item__value">刘旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单状态</span><span class="info-item__value"><span class="tag tag-green">已完成</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">完成时间</span><span class="info-item__value">2026-03-21 16:45:00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="rescue-info-card">
|
||||
<div class="card__header" onclick="toggleCard('rescue-info-card', this)">
|
||||
<div class="card__title">救助信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助意见：</div>
|
||||
<div class="desc-block__text">建议立即送往最近医院急诊科进行头颅CT检查，排除脑血管意外可能。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="result-toolbar">
|
||||
<div class="desc-block__label" style="margin-bottom:0;">救助结果：</div>
|
||||
<button class="result-action-btn" type="button" onclick="openResultDialog()">编辑</button>
|
||||
</div>
|
||||
<div id="result-display" class="result-filled"></div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">相关照片：</div>
|
||||
<div class="photo-list" id="photo-list-done">
|
||||
<div class="photo-item">现场照片 1<div class="photo-item__mask">点击替换</div></div>
|
||||
<div class="photo-item">现场照片 2<div class="photo-item__mask">点击替换</div></div>
|
||||
<div class="photo-item">现场照片 3<div class="photo-item__mask">点击替换</div></div>
|
||||
<button class="photo-add" onclick="addPhoto('photo-list-done')" type="button"><span>＋</span><span>上传照片</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="summary-toolbar">
|
||||
<div class="desc-block__label" style="margin-bottom:0;">补充小结：</div>
|
||||
<button class="summary-add-btn" type="button" onclick="openSummaryDialog()">新增小结</button>
|
||||
</div>
|
||||
<div id="summary-list-done" class="summary-list"></div>
|
||||
</div>
|
||||
<!-- <div class="action-row">-->
|
||||
<!-- <button class="save-btn" onclick="saveSection('救助信息')">保存救助信息</button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="dispatch-info-card">
|
||||
<div class="card__header" onclick="toggleCard('dispatch-info-card', this)">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="info-item"><span class="info-item__label">派单时间</span><span class="info-item__value">2026-03-21 15:18:00</span></div>
|
||||
<div class="info-item"><span class="info-item__label">驻场人员</span><span class="info-item__value">王希（138-9201-3001）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">派单状态</span><span class="info-item__value"><span class="tag tag-green">已完成</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">结束时间</span><span class="info-item__value">2026-03-21 16:40:00</span></div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">派单说明：</div>
|
||||
<div class="desc-block__text">给这个员工紧急挂号就诊，需要拍头颅CT</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">驻场说明：</div>
|
||||
<div class="desc-block__text">已经挂号并且开了头颅CT检查单，已陪同就诊完毕，员工状态稳定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="ambulance-card">
|
||||
<div class="card__header" onclick="toggleCard('ambulance-card', this)">
|
||||
<div class="card__title">救护车支援</div>
|
||||
<div class="card__toggle"><span>收起</span><svg class="card__arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg></div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="ambulance-toolbar">
|
||||
<div class="desc-block__label" style="margin-bottom:0;">支援详情</div>
|
||||
<!-- [交互] 点击跳转至: ./dispatch-ambulance.html -->
|
||||
<button class="ambulance-action-btn" type="button" onclick="location.href='./dispatch-ambulance.html'">编辑</button>
|
||||
</div>
|
||||
<div id="ambulance-display" class="ambulance-display">
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">车牌号</span><span id="amb-d-plate" class="ambulance-display__value">陕A·120-01</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">所属机构</span><span id="amb-d-hospital" class="ambulance-display__value">长庆油田职工医院</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">驾驶人</span><span id="amb-d-driver" class="ambulance-display__value">李强</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">驾驶人电话</span><span id="amb-d-driverphone" class="ambulance-display__value">138-9101-2001</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">随行人</span><span id="amb-d-escort" class="ambulance-display__value">张伟</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">随行人电话</span><span id="amb-d-escortphone" class="ambulance-display__value">138-9201-5001</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">目的地</span><span id="amb-d-dest" class="ambulance-display__value">长庆油田职工医院急诊科</span></div>
|
||||
<div class="ambulance-display__row"><span class="ambulance-display__label">备注</span><span id="amb-d-remark" class="ambulance-display__value">患者疑似脑血管意外，请携带心电监护设备</span></div>
|
||||
</div>
|
||||
<div class="tip-text">操作人员可点击编辑修改救护车支援信息。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="summary-dialog-mask" class="dialog-mask" onclick="closeSummaryDialog(event)">
|
||||
<div class="dialog">
|
||||
<div id="summary-dialog-title" class="dialog__header">新增补充小结</div>
|
||||
<div class="dialog__body">
|
||||
<div class="dialog__hint">支持输入多行文本，保存后会作为一条补充小结显示在列表中。</div>
|
||||
<textarea id="summary-dialog-input" class="form-textarea" placeholder="请输入补充小结内容"></textarea>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="dialog__btn" type="button" onclick="closeSummaryDialog(event)">取消</button>
|
||||
<button class="dialog__btn dialog__btn--primary" type="button" onclick="saveSummaryItem()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="result-dialog-mask" class="dialog-mask" onclick="closeResultDialog(event)">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">编辑救助结果</div>
|
||||
<div class="dialog__body">
|
||||
<div class="dialog__hint">支持输入多行文本，保存后会更新当前救助结果。</div>
|
||||
<textarea id="result-dialog-input" class="form-textarea" placeholder="请输入救助结果"></textarea>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="dialog__btn" type="button" onclick="closeResultDialog(event)">取消</button>
|
||||
<button class="dialog__btn dialog__btn--primary" type="button" onclick="saveResult()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 救护车编辑弹窗 -->
|
||||
<div id="ambulance-dialog-mask" class="dialog-mask" onclick="closeAmbulanceDialog(event)">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">编辑救护车支援</div>
|
||||
<div class="dialog__body" style="max-height:65vh;overflow-y:auto;">
|
||||
<div class="dialog__hint">搜索并选择救护车，选中后自动带出驾驶员信息，再填写随行人和目的地。</div>
|
||||
<div class="search-box">
|
||||
<input id="amb-dialog-search" class="search-input" type="text" placeholder="搜索车牌号或所属机构..." oninput="filterAmbOptions()" />
|
||||
</div>
|
||||
<div id="amb-option-list" class="option-list">
|
||||
<div class="option-item selected" onclick="selectAmbOption(this)" data-plate="陕A·120-01" data-hospital="长庆油田职工医院" data-driver="李强" data-driverphone="138-9101-2001" data-dist="1.5km">
|
||||
<div class="option-item__check"></div>
|
||||
<div class="option-item__main"><div class="option-item__title">陕A·120-01</div><div class="option-item__meta">长庆油田职工医院</div></div>
|
||||
<div class="option-item__dist">1.5km</div>
|
||||
</div>
|
||||
<div class="option-item" onclick="selectAmbOption(this)" data-plate="陕A·120E2" data-hospital="宝石花医院" data-driver="赵刚" data-driverphone="138-2210-8899" data-dist="3.8km">
|
||||
<div class="option-item__check"></div>
|
||||
<div class="option-item__main"><div class="option-item__title">陕A·120E2</div><div class="option-item__meta">宝石花医院</div></div>
|
||||
<div class="option-item__dist">3.8km</div>
|
||||
</div>
|
||||
<div class="option-item" onclick="selectAmbOption(this)" data-plate="陕A·120E5" data-hospital="西安急救中心" data-driver="李海峰" data-driverphone="138-6655-2008" data-dist="8.6km">
|
||||
<div class="option-item__check"></div>
|
||||
<div class="option-item__main"><div class="option-item__title">陕A·120E5</div><div class="option-item__meta">西安急救中心</div></div>
|
||||
<div class="option-item__dist">8.6km</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-field">
|
||||
<div class="dialog-field__label">随行人</div>
|
||||
<input id="amb-dialog-escort" class="dialog-field__input" type="text" value="张伟" />
|
||||
</div>
|
||||
<div class="dialog-field">
|
||||
<div class="dialog-field__label">随行人电话</div>
|
||||
<input id="amb-dialog-escortphone" class="dialog-field__input" type="text" value="138-9201-5001" />
|
||||
</div>
|
||||
<div class="dialog-field">
|
||||
<div class="dialog-field__label">目的地</div>
|
||||
<input id="amb-dialog-dest" class="dialog-field__input" type="text" value="长庆油田职工医院急诊科" />
|
||||
</div>
|
||||
<div class="dialog-field">
|
||||
<div class="dialog-field__label">备注信息</div>
|
||||
<textarea id="amb-dialog-remark" class="dialog-field__textarea" placeholder="请输入备注信息...">患者疑似脑血管意外，请携带心电监护设备</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="dialog__btn" type="button" onclick="closeAmbulanceDialog(event)">取消</button>
|
||||
<button class="dialog__btn dialog__btn--primary" type="button" onclick="saveAmbulance()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
var summaryItems = [
|
||||
'接到应急求助后立即抵达现场，员工突发头晕伴恶心呕吐。',
|
||||
'现场监测体征异常，初步处置无效，联系驻场人员陪同就医。',
|
||||
'已完成头颅CT检测，员工由同事留守陪护，已告知家属及部门负责人。'
|
||||
];
|
||||
var editingSummaryIndex = -1;
|
||||
var resultText = '员工已送达长庆油田职工医院急诊科，完成头颅CT检查，排除脑出血，诊断为高血压引起的眩晕，已开具降压药物并留观。';
|
||||
|
||||
function saveSection(name) {
|
||||
alert(name + '已保存');
|
||||
}
|
||||
|
||||
function addPhoto(listId) {
|
||||
var list = document.getElementById(listId);
|
||||
var addBtn = list.querySelector('.photo-add');
|
||||
var count = list.querySelectorAll('.photo-item').length + 1;
|
||||
var item = document.createElement('div');
|
||||
item.className = 'photo-item';
|
||||
item.innerHTML = '现场照片 ' + count + '<div class="photo-item__mask">点击替换</div>';
|
||||
list.insertBefore(item, addBtn);
|
||||
}
|
||||
|
||||
function renderResult() {
|
||||
var el = document.getElementById('result-display');
|
||||
el.className = resultText ? 'result-filled' : 'result-empty';
|
||||
el.innerHTML = resultText ? escapeHtml(resultText).replace(/\n/g, '<br>') : '暂未填写救助结果';
|
||||
}
|
||||
|
||||
function openResultDialog() {
|
||||
document.getElementById('result-dialog-input').value = resultText;
|
||||
document.getElementById('result-dialog-mask').classList.add('show');
|
||||
}
|
||||
|
||||
function closeResultDialog(event) {
|
||||
if (event && event.currentTarget !== event.target && event.target.className.indexOf('dialog__btn') === -1) return;
|
||||
document.getElementById('result-dialog-mask').classList.remove('show');
|
||||
}
|
||||
|
||||
function saveResult() {
|
||||
var input = document.getElementById('result-dialog-input');
|
||||
var value = input.value.trim();
|
||||
if (!value) {
|
||||
alert('请输入救助结果内容');
|
||||
return;
|
||||
}
|
||||
resultText = value;
|
||||
renderResult();
|
||||
closeResultDialog();
|
||||
}
|
||||
|
||||
function renderSummaryList() {
|
||||
var container = document.getElementById('summary-list-done');
|
||||
container.innerHTML = '';
|
||||
for (var i = 0; i < summaryItems.length; i++) {
|
||||
var item = document.createElement('div');
|
||||
item.className = 'summary-item';
|
||||
item.innerHTML = '<div class="summary-item__top"><span class="summary-item__idx">小结 ' + (i + 1) + '</span><div style="display:flex;gap:6px;"><button class="summary-edit-btn" type="button" onclick="openSummaryDialog(' + i + ')">编辑</button><button class="summary-delete-btn" type="button" onclick="deleteSummaryItem(' + i + ')">删除</button></div></div><div class="summary-item__text">' + escapeHtml(summaryItems[i]).replace(/\n/g, '<br>') + '</div>';
|
||||
container.appendChild(item);
|
||||
}
|
||||
}
|
||||
|
||||
function openSummaryDialog(index) {
|
||||
editingSummaryIndex = typeof index === 'number' ? index : -1;
|
||||
document.getElementById('summary-dialog-title').textContent = editingSummaryIndex > -1 ? '编辑补充小结' : '新增补充小结';
|
||||
document.getElementById('summary-dialog-input').value = editingSummaryIndex > -1 ? summaryItems[editingSummaryIndex] : '';
|
||||
document.getElementById('summary-dialog-mask').classList.add('show');
|
||||
}
|
||||
|
||||
function closeSummaryDialog(event) {
|
||||
if (event && event.currentTarget !== event.target && event.target.className.indexOf('dialog__btn') === -1) return;
|
||||
document.getElementById('summary-dialog-mask').classList.remove('show');
|
||||
}
|
||||
|
||||
function deleteSummaryItem(index) {
|
||||
if (!confirm('确定删除小结 ' + (index + 1) + ' 吗？')) return;
|
||||
summaryItems.splice(index, 1);
|
||||
renderSummaryList();
|
||||
}
|
||||
|
||||
function saveSummaryItem() {
|
||||
var input = document.getElementById('summary-dialog-input');
|
||||
var value = input.value.trim();
|
||||
if (!value) {
|
||||
alert('请输入补充小结内容');
|
||||
return;
|
||||
}
|
||||
if (editingSummaryIndex > -1) summaryItems[editingSummaryIndex] = value;
|
||||
else summaryItems.push(value);
|
||||
renderSummaryList();
|
||||
closeSummaryDialog();
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
||||
}
|
||||
|
||||
renderResult();
|
||||
renderSummaryList();
|
||||
|
||||
/* 救护车编辑弹窗 */
|
||||
function openAmbulanceDialog() {
|
||||
document.getElementById('amb-dialog-search').value = '';
|
||||
filterAmbOptions();
|
||||
document.getElementById('ambulance-dialog-mask').classList.add('show');
|
||||
}
|
||||
function closeAmbulanceDialog(event) {
|
||||
if (event && event.currentTarget !== event.target && event.target.className.indexOf('dialog__btn') === -1) return;
|
||||
document.getElementById('ambulance-dialog-mask').classList.remove('show');
|
||||
}
|
||||
function selectAmbOption(el) {
|
||||
document.querySelectorAll('#amb-option-list .option-item').forEach(function(i) { i.classList.remove('selected'); });
|
||||
el.classList.add('selected');
|
||||
}
|
||||
function filterAmbOptions() {
|
||||
var kw = document.getElementById('amb-dialog-search').value.trim().toLowerCase();
|
||||
var items = Array.prototype.slice.call(document.querySelectorAll('#amb-option-list .option-item'));
|
||||
var visible = [];
|
||||
items.forEach(function(item) {
|
||||
var plate = (item.getAttribute('data-plate') || '').toLowerCase();
|
||||
var hospital = (item.getAttribute('data-hospital') || '').toLowerCase();
|
||||
var matched = !kw || plate.indexOf(kw) > -1 || hospital.indexOf(kw) > -1;
|
||||
item.classList.toggle('is-hidden', !matched);
|
||||
if (matched) visible.push(item);
|
||||
});
|
||||
var sel = document.querySelector('#amb-option-list .option-item.selected');
|
||||
if (!sel || sel.classList.contains('is-hidden')) {
|
||||
items.forEach(function(i) { i.classList.remove('selected'); });
|
||||
if (visible.length > 0) visible[0].classList.add('selected');
|
||||
}
|
||||
}
|
||||
function saveAmbulance() {
|
||||
var sel = document.querySelector('#amb-option-list .option-item.selected');
|
||||
if (!sel) { alert('请选择救护车'); return; }
|
||||
document.getElementById('amb-d-plate').textContent = sel.getAttribute('data-plate');
|
||||
document.getElementById('amb-d-hospital').textContent = sel.getAttribute('data-hospital');
|
||||
document.getElementById('amb-d-driver').textContent = sel.getAttribute('data-driver');
|
||||
document.getElementById('amb-d-driverphone').textContent = sel.getAttribute('data-driverphone');
|
||||
document.getElementById('amb-d-escort').textContent = document.getElementById('amb-dialog-escort').value.trim() || '-';
|
||||
document.getElementById('amb-d-escortphone').textContent = document.getElementById('amb-dialog-escortphone').value.trim() || '-';
|
||||
document.getElementById('amb-d-dest').textContent = document.getElementById('amb-dialog-dest').value.trim() || '-';
|
||||
document.getElementById('amb-d-remark').textContent = document.getElementById('amb-dialog-remark').value.trim() || '-';
|
||||
closeAmbulanceDialog();
|
||||
alert('救护车支援信息已保存');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!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>
|
||||
/* ========== 公共基础样式 ========== */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="window.location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title" id="kd-nav-title">知识详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div id="kd-content" style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<!-- 由JS动态填充内容 -->
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 知识库数据集合
|
||||
* 每个key对应一个知识条目的完整内容
|
||||
*/
|
||||
var KB_DATA = {
|
||||
'blood-routine': {
|
||||
icon: '🩺', bg: '#e6f4ff', title: '血常规检查解读指南', cat: '体检知识', date: '2026-03-15',
|
||||
summary: '血常规是最基本的血液检验，通过检测血液中各种细胞成分的数量和形态，帮助医生了解患者的基本健康状况，是临床诊断的重要依据之一。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '白细胞计数（WBC）', desc: '正常范围：4.0\u201310.0 \u00d7 10\u2079/L。升高提示感染、炎症或白血病；降低见于病毒感染、药物影响或免疫抑制。' },
|
||||
{ color: '#52c41a', name: '红细胞计数（RBC）', desc: '男性正常范围：4.5\u20135.5 \u00d7 10\u00b9\u00b2/L；女性：3.8\u20135.1 \u00d7 10\u00b9\u00b2/L。降低提示贫血，升高见于脱水或红细胞增多症。' },
|
||||
{ color: '#fa8c16', name: '血小板计数（PLT）', desc: '正常范围：100\u2013300 \u00d7 10\u2079/L。降低有出血风险，升高见于炎症或血小板增多症。' }
|
||||
]
|
||||
},
|
||||
'ecg': {
|
||||
icon: '❤️', bg: '#f6ffed', title: '心电图异常结果说明', cat: '体检知识', date: '2026-03-10',
|
||||
summary: '心电图（ECG）是记录心脏电活动的无创检查，常见异常结果需结合临床症状综合判断，不可单凭报告结论下诊断。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: 'ST段改变', desc: 'ST段压低\u22650.1mV提示心肌缺血；ST段抬高需警惕急性心肌梗死，需立即就医。' },
|
||||
{ color: '#fa8c16', name: '心律失常', desc: '包括窦性心动过速（>100次/分）、窦性心动过缓（<60次/分）、房颤等，需结合症状评估。' },
|
||||
{ color: '#1677ff', name: '束支传导阻滞', desc: '完全性左束支传导阻滞常提示器质性心脏病；右束支传导阻滞可见于正常人，需随访观察。' }
|
||||
]
|
||||
},
|
||||
'liver': {
|
||||
icon: '🔬', bg: '#fff7e6', title: '肝功能指标详解', cat: '体检知识', date: '2026-03-12',
|
||||
summary: '肝功能检查通过检测血液中多种酶和蛋白质水平，评估肝脏的合成、代谢和排泄功能，是发现肝脏疾病的重要手段。',
|
||||
items: [
|
||||
{ color: '#fa8c16', name: '谷丙转氨酶（ALT）', desc: '正常值：男\u226450 U/L，女\u226440 U/L。升高提示肝细胞损伤，见于病毒性肝炎、脂肪肝、药物性肝损伤等。' },
|
||||
{ color: '#52c41a', name: '谷草转氨酶（AST）', desc: '正常值：\u226440 U/L。AST/ALT比值>2提示酒精性肝病；单纯升高也见于心肌损伤。' },
|
||||
{ color: '#1677ff', name: '总胆红素（TBIL）', desc: '正常值：3.4\u201317.1 \u03bcmol/L。升高引起黄疸，需区分溶血性、肝细胞性和梗阻性黄疸。' }
|
||||
]
|
||||
},
|
||||
'glucose': {
|
||||
icon: '💉', bg: '#fff1f0', title: '血糖检测与糖尿病筛查', cat: '体检知识', date: '2026-03-08',
|
||||
summary: '血糖检测是糖尿病筛查和管理的核心手段，包括空腹血糖、餐后2小时血糖和糖化血红蛋白三项主要指标。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '空腹血糖（FPG）', desc: '正常：<6.1 mmol/L；糖尿病前期：6.1\u20137.0 mmol/L；糖尿病诊断标准：\u22657.0 mmol/L（需两次确认）。' },
|
||||
{ color: '#fa8c16', name: '餐后2小时血糖', desc: '正常：<7.8 mmol/L；糖耐量受损：7.8\u201311.1 mmol/L；\u226511.1 mmol/L结合症状可诊断糖尿病。' },
|
||||
{ color: '#722ed1', name: '糖化血红蛋白（HbA1c）', desc: '反映近2\u20133个月平均血糖水平。正常<5.7%；5.7\u20136.4%为糖尿病前期；\u22656.5%可诊断糖尿病。' }
|
||||
]
|
||||
},
|
||||
'antihypertensive': {
|
||||
icon: '💊', bg: '#e6f4ff', title: '常用降压药物对比', cat: '药品知识', date: '2026-02-20',
|
||||
summary: '降压药物分为五大类，各有适应症和禁忌症，临床选药需结合患者合并症、年龄、肾功能等综合考量。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: 'ACEI/ARB类', desc: '代表药：依那普利、缬沙坦。适用于合并糖尿病、蛋白尿、心衰患者。禁用于妊娠、双侧肾动脉狭窄。' },
|
||||
{ color: '#52c41a', name: '钙通道阻滞剂（CCB）', desc: '代表药：氨氯地平、硝苯地平。适用于老年、单纯收缩期高血压。不良反应：踝部水肿、头痛。' },
|
||||
{ color: '#fa8c16', name: '利尿剂', desc: '代表药：氢氯噻嗪、螺内酯。适用于容量负荷过重、心衰患者。注意监测血钾、血糖、血尿酸。' }
|
||||
]
|
||||
},
|
||||
'statin': {
|
||||
icon: '🧪', bg: '#f6ffed', title: '他汀类药物使用指南', cat: '药品知识', date: '2026-02-15',
|
||||
summary: '他汀类药物是目前最有效的调脂药物，通过抑制HMG-CoA还原酶降低LDL-C，同时具有抗炎、稳定斑块等多效性作用。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '适应症与目标值', desc: '适用于LDL-C升高、动脉粥样硬化性心血管病（ASCVD）患者。高危患者LDL-C目标<1.8 mmol/L。' },
|
||||
{ color: '#fa8c16', name: '常用药物与剂量', desc: '阿托伐他汀10\u201380mg/日；瑞舒伐他汀5\u201340mg/日；辛伐他汀20\u201340mg/日（晚间服用效果更佳）。' },
|
||||
{ color: '#ff4d4f', name: '副作用监测', desc: '肌肉疼痛（肌病）：监测CK；肝功能损害：用药前及用药后4\u20138周复查ALT/AST；血糖轻度升高。' }
|
||||
]
|
||||
},
|
||||
'hypertension': {
|
||||
icon: '🫀', bg: '#fff7e6', title: '高血压诊断与管理', cat: '疾病知识', date: '2026-03-01',
|
||||
summary: '高血压是最常见的慢性病之一，长期控制不佳可导致心、脑、肾等靶器官损害。规范管理可显著降低心脑血管事件风险。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '诊断标准与分级', desc: '1级：140\u2013159/90\u201399 mmHg；2级：160\u2013179/100\u2013109 mmHg；3级：\u2265180/110 mmHg。非同日3次测量均达标方可诊断。' },
|
||||
{ color: '#fa8c16', name: '生活方式干预', desc: '减重（BMI<24）、低盐饮食（<6g/日）、戒烟限酒、规律有氧运动（每周\u2265150分钟）、减少精神压力。' },
|
||||
{ color: '#1677ff', name: '药物治疗原则', desc: '小剂量起始，优先选用长效制剂，联合用药，个体化治疗。血压目标：一般患者<140/90 mmHg，高危患者<130/80 mmHg。' }
|
||||
]
|
||||
},
|
||||
'migraine': {
|
||||
icon: '🧠', bg: '#fff1f0', title: '偏头痛的诊断与治疗', cat: '疾病知识', date: '2026-03-05',
|
||||
summary: '偏头痛是一种反复发作的神经血管性头痛，以单侧搏动性头痛为主要特征，常伴恶心、畏光、畏声，严重影响生活质量。',
|
||||
items: [
|
||||
{ color: '#ff4d4f', name: '诊断要点', desc: '发作5次以上；持续4\u201372小时；单侧、搏动性、中重度；活动加重；伴恶心/呕吐或畏光/畏声。需排除继发性头痛。' },
|
||||
{ color: '#fa8c16', name: '急性期治疗', desc: '轻中度：NSAIDs（布洛芬600mg）或对乙酰氨基酚。中重度：曲普坦类（舒马曲坦50\u2013100mg）为首选，发作早期使用效果最佳。' },
|
||||
{ color: '#722ed1', name: '预防性治疗', desc: '每月发作\u22654次或严重影响生活时考虑预防用药。常用药物：普萘洛尔、托吡酯、阿米替林、丙戊酸钠。' }
|
||||
]
|
||||
},
|
||||
'nutrition': {
|
||||
icon: '🥗', bg: '#f6ffed', title: '职场人群营养膳食指南', cat: '保健知识', date: '2026-02-28',
|
||||
summary: '久坐办公人群因活动量少、饮食不规律，易出现超重、血脂异常、颈椎病等问题。科学膳食是维护健康的基础。',
|
||||
items: [
|
||||
{ color: '#52c41a', name: '能量与三大营养素', desc: '每日能量摄入：轻体力劳动男性2250kcal，女性1800kcal。碳水化合物50\u201365%，蛋白质15\u201320%，脂肪20\u201330%。' },
|
||||
{ color: '#1677ff', name: '重点营养建议', desc: '增加蔬菜水果（每日500g以上）；减少精制碳水和加工食品；优选全谷物；每周鱼类2次以上；控制红肉摄入。' },
|
||||
{ color: '#fa8c16', name: '饮食行为干预', desc: '规律三餐，避免不吃早餐；控制外卖频率；减少含糖饮料；每日饮水1500\u20131700ml；避免久坐后立即进食。' }
|
||||
]
|
||||
},
|
||||
'exercise': {
|
||||
icon: '🏃', bg: '#e6f4ff', title: '运动与心血管健康', cat: '保健知识', date: '2026-02-25',
|
||||
summary: '规律有氧运动是预防和改善心血管疾病的重要非药物手段，可降低血压、改善血脂、控制体重、减少心血管事件风险。',
|
||||
items: [
|
||||
{ color: '#1677ff', name: '运动推荐量', desc: '每周\u2265150分钟中等强度有氧运动（如快走、游泳、骑车），或\u226575分钟高强度运动。每次至少10分钟，分散进行亦有效。' },
|
||||
{ color: '#52c41a', name: '运动强度判断', desc: '中等强度：运动时心率达最大心率（220-年龄）的50\u201370%，可说话但不能唱歌。高强度：心率达70\u201385%，说话困难。' },
|
||||
{ color: '#ff4d4f', name: '特殊人群注意事项', desc: '高血压患者避免憋气用力动作；冠心病患者运动前需评估；运动前热身5\u201310分钟，运动后拉伸放松，避免突然停止。' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 页面加载时根据URL参数渲染知识详情
|
||||
* 从URL的key参数获取知识条目标识，查找数据并填充页面
|
||||
*/
|
||||
function renderDetail() {
|
||||
// 解析URL参数获取知识条目key
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var key = params.get('key') || 'blood-routine'; // 默认显示血常规
|
||||
var d = KB_DATA[key];
|
||||
if (!d) {
|
||||
// 未找到对应数据时使用默认值
|
||||
d = KB_DATA['blood-routine'];
|
||||
}
|
||||
|
||||
// 设置导航栏标题
|
||||
document.getElementById('kd-nav-title').textContent = d.title;
|
||||
|
||||
// 生成主要内容条目的HTML
|
||||
var itemsHtml = d.items.map(function(it) {
|
||||
return '<div style="background:#f7f8fa;border-radius:10px;padding:14px;margin-bottom:12px;">' +
|
||||
'<div style="font-size:13px;font-weight:600;color:' + it.color + ';margin-bottom:6px;">' + it.name + '</div>' +
|
||||
'<div style="font-size:13px;color:#444;line-height:1.7;">' + it.desc + '</div>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
|
||||
// 填充内容区域
|
||||
document.getElementById('kd-content').innerHTML =
|
||||
'<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f5f5f5;">' +
|
||||
'<div style="width:48px;height:48px;border-radius:12px;background:' + d.bg + ';display:flex;align-items:center;justify-content:center;font-size:24px;">' + d.icon + '</div>' +
|
||||
'<div><div style="font-size:17px;font-weight:700;color:#1a1a1a;">' + d.title + '</div><div style="font-size:12px;color:#999;margin-top:3px;">' + d.cat + ' \u00b7 更新于 ' + d.date + '</div></div>' +
|
||||
'</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">概述</div>' +
|
||||
'<div style="font-size:14px;color:#444;line-height:1.8;margin-bottom:16px;">' + d.summary + '</div>' +
|
||||
'<div style="font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px;">主要内容</div>' +
|
||||
itemsHtml;
|
||||
}
|
||||
|
||||
// 页面加载完成后渲染详情
|
||||
renderDetail();
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,298 @@
|
||||
<!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>
|
||||
/* ========== 公共基础样式 ========== */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ========== 分段Tab样式 ========== */
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab {
|
||||
flex: 1; text-align: center; padding: 12px 0;
|
||||
font-size: 14px; color: #666; cursor: pointer;
|
||||
border-bottom: 2px solid transparent; transition: all 0.2s;
|
||||
}
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* ========== 底部Tab栏样式 ========== */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; text-decoration: none; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
/* ========== 子分类Tab ========== */
|
||||
.sub-tabs { display: flex; gap: 8px; padding: 10px 16px; background: #fff; flex-shrink: 0; }
|
||||
.sub-tab {
|
||||
font-size: 12px; padding: 4px 14px; border-radius: 16px;
|
||||
background: #f5f5f5; color: #666; cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.sub-tab.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* ========== PDF文档条目 ========== */
|
||||
.pdf-item {
|
||||
background: #fff; border-radius: 10px; padding: 12px 14px;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 10px; cursor: pointer;
|
||||
}
|
||||
.pdf-item__icon {
|
||||
width: 44px; height: 44px; border-radius: 10px; background: #fff1f0;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.pdf-item__info { flex: 1; }
|
||||
.pdf-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.pdf-item__meta { font-size: 12px; color: #999; margin-top: 3px; display: flex; gap: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">专业参考</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">知识库</div>
|
||||
</div>
|
||||
|
||||
<!-- 一级分类Tab -->
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchTopTab(this,'panel-article')">知识文章</div>
|
||||
<div class="seg-tab" onclick="switchTopTab(this,'panel-rule')">规章制度</div>
|
||||
</div>
|
||||
|
||||
<!-- 知识文章面板 -->
|
||||
<div id="panel-article" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<!-- 子分类Tab -->
|
||||
<div class="sub-tabs">
|
||||
<div class="sub-tab active" onclick="switchKbTab(this,'kb-exam')">体检知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-drug')">药品知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-disease')">疾病知识</div>
|
||||
<div class="sub-tab" onclick="switchKbTab(this,'kb-health')">保健知识</div>
|
||||
</div>
|
||||
|
||||
<!-- 知识条目列表 -->
|
||||
<div class="scroll-content">
|
||||
<!-- 体检知识 -->
|
||||
<div id="kb-exam">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 血常规检查解读指南 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('blood-routine')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🩺</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">血常规检查解读指南</div><div style="font-size:12px;color:#999;margin-top:3px;">了解各项血常规指标的正常范围与临床意义</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- 心电图异常结果说明 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('ecg')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">❤️</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">心电图异常结果说明</div><div style="font-size:12px;color:#999;margin-top:3px;">常见心电图异常表现及处理建议</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- 肝功能指标详解 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('liver')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🔬</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">肝功能指标详解</div><div style="font-size:12px;color:#999;margin-top:3px;">ALT、AST等肝功能指标的临床意义</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- 血糖检测与糖尿病筛查 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('glucose')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff1f0;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">💉</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">血糖检测与糖尿病筛查</div><div style="font-size:12px;color:#999;margin-top:3px;">空腹血糖、糖化血红蛋白的判读标准</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 药品知识 -->
|
||||
<div id="kb-drug" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 常用降压药物对比 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('antihypertensive')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">💊</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">常用降压药物对比</div><div style="font-size:12px;color:#999;margin-top:3px;">各类降压药的适应症与注意事项</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- 他汀类药物使用指南 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('statin')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🧪</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">他汀类药物使用指南</div><div style="font-size:12px;color:#999;margin-top:3px;">调脂药物的用法用量与副作用监测</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 疾病知识 -->
|
||||
<div id="kb-disease" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 高血压诊断与管理 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('hypertension')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🫀</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">高血压诊断与管理</div><div style="font-size:12px;color:#999;margin-top:3px;">高血压分级标准及生活方式干预</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- 偏头痛的诊断与治疗 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('migraine')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#fff1f0;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🧠</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">偏头痛的诊断与治疗</div><div style="font-size:12px;color:#999;margin-top:3px;">偏头痛的临床特征、诱因及处理方案</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 保健知识 -->
|
||||
<div id="kb-health" style="display:none;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<!-- 职场人群营养膳食指南 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('nutrition')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🥗</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">职场人群营养膳食指南</div><div style="font-size:12px;color:#999;margin-top:3px;">针对久坐办公人群的饮食建议</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- 运动与心血管健康 -->
|
||||
<div style="background:#fff;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:10px;cursor:pointer;" onclick="goDetail('exercise')">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">🏃</div>
|
||||
<div style="flex:1;"><div style="font-size:14px;font-weight:600;color:#1a1a1a;">运动与心血管健康</div><div style="font-size:12px;color:#999;margin-top:3px;">有氧运动对心血管的保护作用</div></div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /panel-article -->
|
||||
|
||||
<!-- 规章制度面板 -->
|
||||
<div id="panel-rule" style="display:none;flex:1;overflow-y:auto;background:#f7f8fa;">
|
||||
<div style="padding:12px 16px 0;">
|
||||
<div class="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">员工健康管理办法（2026版）</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 2.3MB</span><span>2026-01-15</span></div>
|
||||
</div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div class="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">职业病防治管理规定</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 1.8MB</span><span>2025-12-20</span></div>
|
||||
</div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div class="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">体检异常结果处置流程</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 0.9MB</span><span>2025-11-08</span></div>
|
||||
</div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div class="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">健康咨询服务管理细则</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 1.5MB</span><span>2025-10-22</span></div>
|
||||
</div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div class="pdf-item">
|
||||
<div class="pdf-item__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 2h9l5 5v15H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#ff4d4f" opacity="0.15" stroke="#ff4d4f" stroke-width="1.5"/><path d="M15 2v5h5" stroke="#ff4d4f" stroke-width="1.5"/><text x="8" y="17" font-size="7" font-weight="700" fill="#ff4d4f">PDF</text></svg></div>
|
||||
<div class="pdf-item__info">
|
||||
<div class="pdf-item__name">应急救护操作规范</div>
|
||||
<div class="pdf-item__meta"><span>PDF · 3.1MB</span><span>2025-09-15</span></div>
|
||||
</div>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏 -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="../workbench/index.html">
|
||||
<span class="tab-icon">🏥</span>
|
||||
<span class="tab-label">工作台</span>
|
||||
<span class="tab-badge">4</span>
|
||||
</a>
|
||||
<a class="tab-item active" href="./index.html">
|
||||
<span class="tab-icon">📚</span>
|
||||
<span class="tab-label">知识库</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../../ai-assistant/index.html">
|
||||
<span class="tab-icon">🤖</span>
|
||||
<span class="tab-label">AI助手</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../../message/index.html">
|
||||
<span class="tab-icon">💬</span>
|
||||
<span class="tab-label">消息</span>
|
||||
<span class="tab-badge">2</span>
|
||||
</a>
|
||||
<a class="tab-item" href="../profile/index.html">
|
||||
<span class="tab-icon">👤</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为小助手 */
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
|
||||
/**
|
||||
* 切换一级Tab（知识文章 / 规章制度）
|
||||
*/
|
||||
function switchTopTab(el, panelId) {
|
||||
el.closest('.seg-tabs').querySelectorAll('.seg-tab').forEach(function(t) {
|
||||
t.classList.remove('active');
|
||||
});
|
||||
el.classList.add('active');
|
||||
var displayMap = { 'panel-article': 'flex', 'panel-rule': 'block' };
|
||||
['panel-article', 'panel-rule'].forEach(function(id) {
|
||||
var p = document.getElementById(id);
|
||||
if (p) p.style.display = id === panelId ? displayMap[id] : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换知识库子分类Tab
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 对应面板的ID
|
||||
*/
|
||||
function switchKbTab(el, panelId) {
|
||||
el.closest('.sub-tabs').querySelectorAll('.sub-tab').forEach(function(t) {
|
||||
t.classList.remove('active');
|
||||
});
|
||||
el.classList.add('active');
|
||||
['kb-exam', 'kb-drug', 'kb-disease', 'kb-health'].forEach(function(id) {
|
||||
var p = document.getElementById(id);
|
||||
if (p) p.style.display = id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到知识详情页
|
||||
* @param {string} key - 知识条目的标识key
|
||||
*/
|
||||
function goDetail(key) {
|
||||
window.location.href = './article-detail.html?key=' + key;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.btn-primary { background: #1677ff; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">修改密码</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">当前密码</span>
|
||||
<input type="password" placeholder="请输入当前密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">新密码</span>
|
||||
<input type="password" placeholder="请输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">确认新密码</span>
|
||||
<input type="password" placeholder="再次输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="openModal('modal-pwd-saved')" class="btn-primary">保存修改</button>
|
||||
</div>
|
||||
|
||||
<!-- 修改成功弹窗 -->
|
||||
<div id="modal-pwd-saved" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">修改成功</div>
|
||||
<div class="modal-body">密码已更新，下次登录请使用新密码。</div>
|
||||
<div class="modal-actions">
|
||||
<!-- [交互] 确定后跳转至: ./index.html -->
|
||||
<button onclick="closeModal('modal-pwd-saved');location.href='./index.html'" style="color:#1677ff;font-weight:600;">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.add('active');
|
||||
}
|
||||
function closeModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.remove('active');
|
||||
}
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; position: relative; flex-shrink: 0; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.duty-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: linear-gradient(135deg,#e6f4ff,#f0f5ff); margin-bottom: 12px; }
|
||||
.duty-summary__main { font-size: 14px; font-weight: 600; color: #1677ff; }
|
||||
.duty-summary__sub { font-size: 12px; color: #666; margin-top: 4px; }
|
||||
.duty-summary__tag { padding: 4px 10px; border-radius: 999px; background: #1677ff; color: #fff; font-size: 11px; font-weight: 600; }
|
||||
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.cal-header__month { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.cal-header__nav { display: flex; gap: 6px; }
|
||||
.cal-header__btn { width: 28px; height: 28px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; color: #666; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-week { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: 11px; color: #999; margin-bottom: 4px; }
|
||||
.cal-week span { padding: 4px 0; }
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
|
||||
.cal-day { min-height: 42px; border-radius: 10px; background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: #1a1a1a; position: relative; }
|
||||
.cal-day--other { color: #bbb; background: transparent; }
|
||||
.cal-day--today { background: #1677ff; color: #fff; font-weight: 700; }
|
||||
.cal-day--duty { border: 1px solid #91caff; background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.cal-day--today.cal-day--duty { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: #1677ff; margin-top: 3px; }
|
||||
.cal-day--today .cal-dot { background: #fff; }
|
||||
.legend { display: flex; gap: 14px; align-items: center; margin-top: 12px; font-size: 11px; color: #666; }
|
||||
.legend-item { display: flex; align-items: center; gap: 5px; }
|
||||
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.legend-dot--today { background: #1677ff; }
|
||||
.legend-dot--duty { background: #91caff; }
|
||||
.duty-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.duty-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: #fafafa; }
|
||||
.duty-item__avatar { width: 38px; height: 38px; border-radius: 50%; background: #e6f4ff; color: #1677ff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
|
||||
.duty-item__info { flex: 1; min-width: 0; }
|
||||
.duty-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.duty-item__desc { font-size: 12px; color: #666; margin-top: 4px; }
|
||||
.duty-item__role { font-size: 11px; color: #999; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">值班信息</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="card">
|
||||
<div class="card-title">值班日历</div>
|
||||
<div class="duty-summary">
|
||||
<div>
|
||||
<div class="duty-summary__main">西安应急中心</div>
|
||||
</div>
|
||||
<span class="duty-summary__tag">今日当班</span>
|
||||
</div>
|
||||
<div class="cal-header">
|
||||
<span class="cal-header__month" id="calMonth"></span>
|
||||
<div class="cal-header__nav">
|
||||
<button class="cal-header__btn" onclick="changeMonth(-1)">‹</button>
|
||||
<button class="cal-header__btn" onclick="changeMonth(1)">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-week"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
|
||||
<div class="cal-grid" id="calGrid"></div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><span class="legend-dot legend-dot--today"></span><span>今天</span></div>
|
||||
<div class="legend-item"><span class="legend-dot legend-dot--duty"></span><span>排班日</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">今日值班人员</div>
|
||||
<div class="duty-list">
|
||||
<div class="duty-item">
|
||||
<div class="duty-item__avatar">刘</div>
|
||||
<div class="duty-item__info">
|
||||
<div class="duty-item__name">刘旭·主治医师</div>
|
||||
</div>
|
||||
<div class="duty-item__role">专业人员</div>
|
||||
</div>
|
||||
<div class="duty-item">
|
||||
<div class="duty-item__avatar">王</div>
|
||||
<div class="duty-item__info">
|
||||
<div class="duty-item__name">王昊</div>
|
||||
</div>
|
||||
<div class="duty-item__role">操作人员</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole','professional');
|
||||
|
||||
var _calYear, _calMonth;
|
||||
var _dutyDays = {
|
||||
2026: {
|
||||
4: [1,2,3,7,8,9,10,14,15,16,17,21,22,23,24,28,29,30],
|
||||
5: [6,7,8,11,12,13,14,18,19,20,21,25,26,27,28],
|
||||
6: [1,2,3,4,8,9,10,11,15,16,17,18,22,23,24,25,29,30]
|
||||
}
|
||||
};
|
||||
|
||||
function initCalendar() {
|
||||
var d = new Date(2026, 3, 24);
|
||||
_calYear = d.getFullYear();
|
||||
_calMonth = d.getMonth() + 1;
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
function changeMonth(dir) {
|
||||
_calMonth += dir;
|
||||
if (_calMonth < 1) {
|
||||
_calMonth = 12;
|
||||
_calYear--;
|
||||
}
|
||||
if (_calMonth > 12) {
|
||||
_calMonth = 1;
|
||||
_calYear++;
|
||||
}
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
document.getElementById('calMonth').textContent = _calYear + '年' + _calMonth + '月';
|
||||
var grid = document.getElementById('calGrid');
|
||||
grid.innerHTML = '';
|
||||
var firstDay = new Date(_calYear, _calMonth - 1, 1).getDay();
|
||||
var daysInMonth = new Date(_calYear, _calMonth, 0).getDate();
|
||||
var prevDays = new Date(_calYear, _calMonth - 1, 0).getDate();
|
||||
var todayYear = 2026;
|
||||
var todayMonth = 4;
|
||||
var todayDate = 24;
|
||||
var duties = (_dutyDays[_calYear] && _dutyDays[_calYear][_calMonth]) || [];
|
||||
|
||||
for (var i = firstDay - 1; i >= 0; i--) {
|
||||
var prevEl = document.createElement('div');
|
||||
prevEl.className = 'cal-day cal-day--other';
|
||||
prevEl.textContent = prevDays - i;
|
||||
grid.appendChild(prevEl);
|
||||
}
|
||||
|
||||
for (var d = 1; d <= daysInMonth; d++) {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'cal-day';
|
||||
var isToday = _calYear === todayYear && _calMonth === todayMonth && d === todayDate;
|
||||
var isDuty = duties.indexOf(d) > -1;
|
||||
if (isToday) el.className += ' cal-day--today';
|
||||
if (isDuty) el.className += ' cal-day--duty';
|
||||
el.innerHTML = '<span>' + d + '</span>';
|
||||
if (isDuty) {
|
||||
var dot = document.createElement('span');
|
||||
dot.className = 'cal-dot';
|
||||
el.appendChild(dot);
|
||||
}
|
||||
grid.appendChild(el);
|
||||
}
|
||||
|
||||
var total = firstDay + daysInMonth;
|
||||
var remain = total % 7 === 0 ? 0 : 7 - total % 7;
|
||||
for (var j = 1; j <= remain; j++) {
|
||||
var nextEl = document.createElement('div');
|
||||
nextEl.className = 'cal-day cal-day--other';
|
||||
nextEl.textContent = j;
|
||||
grid.appendChild(nextEl);
|
||||
}
|
||||
}
|
||||
|
||||
initCalendar();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; text-decoration: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.avatar-section { display: flex; flex-direction: column; align-items: center; padding: 32px 0 24px; background: #fff; }
|
||||
.avatar-wrap { position: relative; cursor: pointer; }
|
||||
.avatar-img { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #e8f4ff, #bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 40px; border: 3px solid #f0f0f0; }
|
||||
.avatar-badge { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; background: #1677ff; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
|
||||
.avatar-hint { font-size: 13px; color: #999; margin-top: 10px; }
|
||||
.form-group { background: #fff; margin: 12px 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.form-row { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f5f5f5; }
|
||||
.form-row:last-child { border-bottom: none; }
|
||||
.form-label { font-size: 15px; color: #1a1a1a; width: 72px; flex-shrink: 0; }
|
||||
.form-input { flex: 1; font-size: 15px; color: #1a1a1a; border: none; outline: none; background: transparent; text-align: right; }
|
||||
.form-input::placeholder { color: #ccc; }
|
||||
.form-value { flex: 1; font-size: 15px; color: #999; text-align: right; }
|
||||
.bottom-action { padding: 16px; flex-shrink: 0; background: #f7f8fa; }
|
||||
.btn-save { width: 100%; padding: 14px; background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
.action-sheet-mask { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
|
||||
.action-sheet-mask.active { display: block; }
|
||||
.action-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding-bottom: 20px; z-index: 201; transform: translateY(100%); transition: transform 0.3s ease; }
|
||||
.action-sheet-mask.active .action-sheet { transform: translateY(0); }
|
||||
.action-sheet-item { padding: 16px; text-align: center; font-size: 16px; color: #1a1a1a; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.action-sheet-item:active { background: #f5f5f5; }
|
||||
.action-sheet-cancel { padding: 16px; text-align: center; font-size: 16px; color: #999; cursor: pointer; margin-top: 8px; background: #f7f8fa; }
|
||||
.toast { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 300; }
|
||||
.toast.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a href="./index.html" class="back-btn">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</a>
|
||||
<span class="nav-title">修改个人信息</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-wrap" onclick="openSheet()">
|
||||
<div class="avatar-img" id="avatarDisplay">👨⚕️</div>
|
||||
<div class="avatar-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#fff" stroke-width="1.5"><path d="M7 3v8M3 7h8"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar-hint">点击更换头像</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-row">
|
||||
<span class="form-label">姓名</span>
|
||||
<input class="form-input" id="inputName" type="text" value="刘医生" placeholder="请输入姓名" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-action">
|
||||
<button class="btn-save" onclick="handleSave()">保存</button>
|
||||
</div>
|
||||
<div id="avatarSheet" class="action-sheet-mask" onclick="closeSheet(event)">
|
||||
<div class="action-sheet">
|
||||
<div class="action-sheet-item" onclick="pickAvatar('camera')">拍照</div>
|
||||
<div class="action-sheet-item" onclick="pickAvatar('album')">从相册选择</div>
|
||||
<div class="action-sheet-cancel" onclick="closeSheet()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toast" class="toast">保存成功</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openSheet() {
|
||||
document.getElementById('avatarSheet').classList.add('active');
|
||||
}
|
||||
function closeSheet(e) {
|
||||
if (!e || e.target.id === 'avatarSheet' || e.target.closest('.action-sheet-cancel')) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
}
|
||||
}
|
||||
function pickAvatar(source) {
|
||||
document.getElementById('avatarSheet').classList.remove('active');
|
||||
showToast('已选择：' + (source === 'camera' ? '拍照' : '从相册选择'));
|
||||
}
|
||||
function handleSave() {
|
||||
var name = document.getElementById('inputName').value.trim();
|
||||
if (!name) { showToast('请输入姓名'); return; }
|
||||
showToast('保存成功');
|
||||
}
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('active');
|
||||
setTimeout(function() { t.classList.remove('active'); }, 1500);
|
||||
}
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #fff; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
.menu-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.menu-item { display: flex; align-items: center; padding: 16px; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.logout-btn { width: 100%; height: 48px; border: none; border-radius: 12px; background: #fff1f0; color: #ff4d4f; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:60px 20px 24px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<div style="width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid rgba(255,255,255,0.5);">👨⚕️</div>
|
||||
<div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">刘旭</div>
|
||||
<div style="color:rgba(255,255,255,0.8);font-size:13px;margin-top:3px;">专业人员</div>
|
||||
<div style="color:rgba(255,255,255,0.78);font-size:12px;margin-top:4px;">所属应急中心：西安应急中心</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<div class="menu-card">
|
||||
<div class="menu-item" onclick="location.href='./duty-schedule.html'"><span style="font-size:18px;margin-right:12px;">📅</span><span style="font-size:15px;color:#1a1a1a;flex:1;">值班信息</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div class="menu-item" onclick="location.href='./edit-profile.html'"><span style="font-size:18px;margin-right:12px;">📝</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改个人信息</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div class="menu-item" onclick="location.href='./change-pwd.html'"><span style="font-size:18px;margin-right:12px;">🔒</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改密码</span><svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg></div>
|
||||
<div style="display:flex;align-items:center;padding:16px;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">ℹ️</span><span style="font-size:15px;color:#1a1a1a;flex:1;">关于我们</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;">
|
||||
<button class="logout-btn" onclick="openModal('modal-logout')">退出登录</button>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
<div id="modal-logout" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div style="padding:20px 20px 8px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;">退出登录</div>
|
||||
<div style="padding:8px 20px 20px;font-size:14px;color:#666;text-align:center;line-height:1.6;">确认退出当前账号？</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;">
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button onclick="closeModal('modal-logout')" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#ff4d4f;font-weight:600;">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item" onclick="location.href='../workbench/index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">4</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
function openModal(id) { var m = document.getElementById(id); if (m) m.classList.add('active'); }
|
||||
function closeModal(id) { var m = document.getElementById(id); if (m) m.classList.remove('active'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,187 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 救助意见卡片 */
|
||||
.advice-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(82,196,26,0.15); border: 1px solid #d6f0d6; max-width: 260px; }
|
||||
.advice-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg,#52C41A,#389e0d); color: #fff; }
|
||||
.advice-card__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
|
||||
.advice-card__title { font-size: 13px; font-weight: 600; }
|
||||
.advice-card__body { padding: 10px 14px; background: #f6ffed; font-size: 13px; line-height: 1.7; color: #1a1a1a; }
|
||||
.advice-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f6ffed; border-top: 1px dashed #d6f0d6; font-size: 11px; color: #999; }
|
||||
/* 结束卡片 */
|
||||
.end-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #e8e8e8; max-width: 260px; }
|
||||
.end-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg,#8c8c8c,#595959); color: #fff; }
|
||||
.end-card__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
|
||||
.end-card__title { font-size: 13px; font-weight: 600; }
|
||||
.end-card__body { padding: 10px 14px; background: #fafafa; font-size: 13px; line-height: 1.7; color: #666; }
|
||||
.end-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #fafafa; border-top: 1px dashed #e8e8e8; font-size: 11px; color: #999; }
|
||||
/* 患者信息条 */
|
||||
.emergency-info { background: #fff7e6; padding: 10px 16px; flex-shrink: 0; border-bottom: 1px solid #ffe7ba; }
|
||||
.info-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.info-left { display: flex; align-items: center; gap: 6px; }
|
||||
.info-toggle { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: transform .2s; }
|
||||
.info-detail { display: flex; align-items: center; gap: 8px; }
|
||||
.info-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#fff1f0,#ffccc7); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||||
.info-title { font-size: 12px; color: #999; }
|
||||
.info-value { font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.4; }
|
||||
/* 底部已结束提示 */
|
||||
.ended-bar { padding: 14px 16px; background: #fafafa; border-top: 1px solid #f0f0f0; flex-shrink: 0; text-align: center; font-size: 13px; color: #999; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏：无结束应急按钮 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">张小红 <span style="font-size:11px;font-weight:600;color:#52c41a;background:#f6ffed;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:4px;">已结束</span></span>
|
||||
</div>
|
||||
|
||||
<!-- 患者信息条 -->
|
||||
<div id="emergency-info" class="emergency-info">
|
||||
<div class="info-top">
|
||||
<div class="info-left">
|
||||
<button id="toggle-info-btn" class="info-toggle" onclick="toggleEmergencyInfo()">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span style="font-size:11px;color:#666;">求助时间：2026-04-24 09:15</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./work-order-detail.html -->
|
||||
<button onclick="location.href='./work-order-detail.html'" style="font-size:12px;color:#fa8c16;background:none;border:1px solid #fa8c16;border-radius:6px;padding:4px 10px;cursor:pointer;">查看工单</button>
|
||||
</div>
|
||||
<div id="emergency-info-detail" class="info-detail">
|
||||
<div class="info-avatar">👩</div>
|
||||
<div>
|
||||
<div class="info-title">患者信息</div>
|
||||
<div class="info-value">张小红 · 女 · 45岁 · 采油一厂 · 第一作业区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">09:15</span></div>
|
||||
|
||||
<!-- 患者首条消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">📹 通话时长 12:01</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专业人员消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">收到，请先停止活动，保持半卧位休息。我先了解一下，疼痛是否向左肩或后背放射？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者回复 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">有一点往左肩放射，出了点汗，人有点发慌。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">09:18</span></div>
|
||||
|
||||
<!-- 救助意见卡片 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div>
|
||||
<div class="advice-card">
|
||||
<div class="advice-card__head">
|
||||
<div class="advice-card__icon">✓</div>
|
||||
<div class="advice-card__title">救助意见</div>
|
||||
</div>
|
||||
<div class="advice-card__body">1. 立即停止一切活动，保持安静休息。<br>2. 尽量保持半卧位，避免独自走动。<br>3. 安排同事陪护，持续观察胸痛和呼吸变化。<br>4. 如症状加重，立即启动现场急救转运。</div>
|
||||
<div class="advice-card__foot">
|
||||
<span>刘医生</span>
|
||||
<span>09:18</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者确认 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">好的，已经坐下了，同事在旁边。麻烦帮我看看最近的医院位置。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">16:45</span></div>
|
||||
|
||||
<!-- 应急结束卡片 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f5f5f5,#d9d9d9);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🏁</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">系统通知</div>
|
||||
<div class="end-card">
|
||||
<div class="end-card__head">
|
||||
<div class="end-card__icon">✓</div>
|
||||
<div class="end-card__title">本次应急已结束</div>
|
||||
</div>
|
||||
<!-- <div class="end-card__body">患者已送达医院完成诊治，状态稳定，本次应急响应流程结束。</div>-->
|
||||
<div class="end-card__foot">
|
||||
<span>结束时间</span>
|
||||
<span>2026-04-24 16:45</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部已结束提示 -->
|
||||
<div class="ended-bar">本次应急已结束</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
|
||||
var infoCollapsed = false;
|
||||
function toggleEmergencyInfo() {
|
||||
infoCollapsed = !infoCollapsed;
|
||||
var detail = document.getElementById('emergency-info-detail');
|
||||
var btn = document.getElementById('toggle-info-btn');
|
||||
detail.style.display = infoCollapsed ? 'none' : 'flex';
|
||||
btn.style.transform = infoCollapsed ? 'rotate(-90deg)' : '';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,286 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #ff4d4f; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 救助意见卡片 */
|
||||
.advice-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(82,196,26,0.15); border: 1px solid #d6f0d6; max-width: 260px; }
|
||||
.advice-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg,#52C41A,#389e0d); color: #fff; }
|
||||
.advice-card__icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
|
||||
.advice-card__title { font-size: 13px; font-weight: 600; }
|
||||
.advice-card__body { padding: 10px 14px; background: #f6ffed; font-size: 13px; line-height: 1.7; color: #1a1a1a; }
|
||||
.advice-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f6ffed; border-top: 1px dashed #d6f0d6; font-size: 11px; color: #999; }
|
||||
/* 操作按钮栏 */
|
||||
.action-bar { display: flex; gap: 8px; padding: 8px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.action-btn { flex: 1; height: 36px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; border: none; }
|
||||
.action-btn--green { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
.action-btn--blue { background: #e6f4ff; color: #1677ff; border: 1px solid #91caff; }
|
||||
.action-btn--red { background: #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; }
|
||||
/* 患者信息条 */
|
||||
.emergency-info { background: #fff7e6; padding: 10px 16px; flex-shrink: 0; border-bottom: 1px solid #ffe7ba; }
|
||||
.info-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.info-left { display: flex; align-items: center; gap: 6px; }
|
||||
.info-toggle { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transition: transform .2s; }
|
||||
.info-detail { display: flex; align-items: center; gap: 8px; }
|
||||
.info-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#fff1f0,#ffccc7); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||||
.info-title { font-size: 12px; color: #999; }
|
||||
.info-value { font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.4; }
|
||||
/* 二次确认弹窗 */
|
||||
.confirm-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 30; padding: 24px; }
|
||||
.confirm-mask.show { display: flex; }
|
||||
.confirm-dialog { width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
|
||||
.confirm-dialog__head { padding: 18px 20px 8px; font-size: 17px; font-weight: 700; color: #1a1a1a; text-align: center; }
|
||||
.confirm-dialog__body { padding: 0 20px 20px; font-size: 14px; line-height: 1.7; color: #666; text-align: center; }
|
||||
.confirm-dialog__actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.confirm-dialog__btn { flex: 1; height: 48px; border: none; background: #fff; font-size: 15px; cursor: pointer; }
|
||||
.confirm-dialog__btn + .confirm-dialog__btn { border-left: 1px solid #f0f0f0; }
|
||||
.confirm-dialog__btn--cancel { color: #666; }
|
||||
.confirm-dialog__btn--confirm { color: #ff4d4f; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">张小红 <span style="font-size:11px;font-weight:600;color:#1677ff;background:#e6f4ff;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:4px;">进行中</span></span>
|
||||
<button class="nav-right" onclick="openEndConfirm()">结束应急</button>
|
||||
</div>
|
||||
|
||||
<!-- 患者信息条 -->
|
||||
<div id="emergency-info" class="emergency-info">
|
||||
<div class="info-top">
|
||||
<div class="info-left">
|
||||
<!-- [交互] 点击收起/展开患者信息 -->
|
||||
<button id="toggle-info-btn" class="info-toggle" onclick="toggleEmergencyInfo()">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span style="font-size:11px;color:#666;">求助时间：2026-04-24 09:15</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./work-order-detail-ongoing.html -->
|
||||
<button onclick="location.href='./work-order-detail-ongoing.html'" style="font-size:12px;color:#fa8c16;background:none;border:1px solid #fa8c16;border-radius:6px;padding:4px 10px;cursor:pointer;">查看工单</button>
|
||||
</div>
|
||||
<div id="emergency-info-detail" class="info-detail">
|
||||
<div class="info-avatar">👩</div>
|
||||
<div>
|
||||
<div class="info-title">患者信息</div>
|
||||
<div class="info-value">张小红 · 女 · 45岁 · 采油一厂 · 第一作业区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">09:15</span></div>
|
||||
|
||||
<!-- 患者首条消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">📹 通话时长 12:01</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专业人员消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">收到，请先停止活动，保持半卧位休息。我先了解一下，疼痛是否向左肩或后背放射？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者回复 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">有一点往左肩放射，出了点汗，人有点发慌。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">09:18</span></div>
|
||||
|
||||
<!-- 救助意见卡片 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div>
|
||||
<div class="advice-card">
|
||||
<div class="advice-card__head">
|
||||
<div class="advice-card__icon">✓</div>
|
||||
<div class="advice-card__title">救助意见</div>
|
||||
</div>
|
||||
<div class="advice-card__body">1. 立即停止一切活动，保持安静休息。<br>2. 尽量保持半卧位，避免独自走动。<br>3. 安排同事陪护，持续观察胸痛和呼吸变化。<br>4. 如症状加重，立即启动现场急救转运。</div>
|
||||
<div class="advice-card__foot">
|
||||
<span>刘医生</span>
|
||||
<span>09:18</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 患者确认 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div>
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">好的，已经坐下了，同事在旁边。麻烦帮我看看最近的医院位置。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮栏 -->
|
||||
<div class="action-bar">
|
||||
<!-- [交互] 点击跳转至: ./rescue-opinion.html -->
|
||||
<button class="action-btn action-btn--green" onclick="location.href='./rescue-opinion.html'">救助意见</button>
|
||||
<!-- [交互] 点击跳转至: ./patient-location.html -->
|
||||
<button class="action-btn action-btn--blue" onclick="location.href='./patient-location.html'">患者定位</button>
|
||||
</div>
|
||||
|
||||
<!-- 媒体选择面板 -->
|
||||
<div id="media-panel" style="display:none;background:#f7f8fa;border-top:1px solid #f0f0f0;padding:16px 20px;flex-shrink:0;">
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
|
||||
<span style="font-size:11px;color:#666;">拍照</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">🖼️</div>
|
||||
<span style="font-size:11px;color:#666;">图库</span>
|
||||
</div>
|
||||
<!-- <div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">-->
|
||||
<!-- <div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📞</div>-->
|
||||
<!-- <span style="font-size:11px;color:#666;">语音通话</span>-->
|
||||
<!-- </div>-->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📹</div>
|
||||
<span style="font-size:11px;color:#666;">视频通话</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区 -->
|
||||
<div style="background:#fff;border-top:1px solid #f0f0f0;padding:8px 12px 14px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<button id="voice-btn" onclick="toggleVoice()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;flex-shrink:0;">🎤</button>
|
||||
<input id="chat-input" type="text" placeholder="输入应急沟通内容..." style="flex:1;background:#f5f5f5;border:none;border-radius:20px;padding:8px 14px;font-size:14px;outline:none;color:#1a1a1a;" />
|
||||
<button id="voice-record-btn" style="display:none;flex:1;height:36px;background:#f5f5f5;border:1.5px solid #d9d9d9;border-radius:20px;font-size:13px;color:#555;cursor:pointer;text-align:center;align-items:center;justify-content:center;">按住说话</button>
|
||||
<button onclick="toggleMediaPanel()" style="width:34px;height:34px;border-radius:50%;background:#f5f5f5;border:none;font-size:20px;font-weight:300;cursor:pointer;flex-shrink:0;color:#666;line-height:1;">+</button>
|
||||
<button onclick="sendMsg()" style="width:34px;height:34px;border-radius:50%;background:#1677ff;border:none;font-size:16px;cursor:pointer;flex-shrink:0;color:#fff;display:flex;align-items:center;justify-content:center;">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="confirm-mask" class="confirm-mask" onclick="closeEndConfirm(event)">
|
||||
<div class="confirm-dialog">
|
||||
<div class="confirm-dialog__head">是否确认结束应急</div>
|
||||
<div class="confirm-dialog__body">结束后本次应急会话将进入“已结束”列表，仅支持查看记录，不可继续发送消息。</div>
|
||||
<div class="confirm-dialog__actions">
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--cancel" onclick="closeEndConfirm(event)">取消</button>
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--confirm" onclick="confirmEndEmergency(event)">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
|
||||
var infoCollapsed = false;
|
||||
function toggleEmergencyInfo() {
|
||||
infoCollapsed = !infoCollapsed;
|
||||
var detail = document.getElementById('emergency-info-detail');
|
||||
var btn = document.getElementById('toggle-info-btn');
|
||||
detail.style.display = infoCollapsed ? 'none' : 'flex';
|
||||
btn.style.transform = infoCollapsed ? 'rotate(-90deg)' : '';
|
||||
}
|
||||
|
||||
function toggleMediaPanel() {
|
||||
var m = document.getElementById('media-panel');
|
||||
m.style.display = m.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function closeMediaPanel() {
|
||||
document.getElementById('media-panel').style.display = 'none';
|
||||
}
|
||||
|
||||
var isVoiceMode = false;
|
||||
function toggleVoice() {
|
||||
isVoiceMode = !isVoiceMode;
|
||||
var input = document.getElementById('chat-input');
|
||||
var voiceBtn = document.getElementById('voice-btn');
|
||||
var recordBtn = document.getElementById('voice-record-btn');
|
||||
if (isVoiceMode) {
|
||||
input.style.display = 'none';
|
||||
recordBtn.style.display = 'flex';
|
||||
voiceBtn.textContent = '⌨️';
|
||||
voiceBtn.style.background = '#e6f4ff';
|
||||
} else {
|
||||
input.style.display = '';
|
||||
recordBtn.style.display = 'none';
|
||||
voiceBtn.textContent = '🎤';
|
||||
voiceBtn.style.background = '#f5f5f5';
|
||||
}
|
||||
}
|
||||
|
||||
function openEndConfirm() {
|
||||
document.getElementById('confirm-mask').classList.add('show');
|
||||
}
|
||||
|
||||
function closeEndConfirm(event) {
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
if (event.currentTarget !== event.target && !event.target.classList.contains('confirm-dialog__btn--cancel')) return;
|
||||
}
|
||||
document.getElementById('confirm-mask').classList.remove('show');
|
||||
}
|
||||
|
||||
function confirmEndEmergency(event) {
|
||||
event.stopPropagation();
|
||||
sessionStorage.setItem('professionalWorkbenchTab', 'done');
|
||||
location.href = './index.html';
|
||||
}
|
||||
|
||||
function sendMsg() {
|
||||
var input = document.getElementById('chat-input');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
var scroll = document.getElementById('chat-scroll');
|
||||
var bubble = document.createElement('div');
|
||||
bubble.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
|
||||
bubble.innerHTML = '<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div><div style="display:flex;flex-direction:column;align-items:flex-end;"><div style="font-size:11px;color:#999;margin-bottom:4px;">专业人员（我）</div><div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">' + text + '</div></div>';
|
||||
scroll.insertBefore(bubble, scroll.lastElementChild);
|
||||
input.value = '';
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 底部Tab栏 */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
/* 二级分段Tab */
|
||||
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.seg-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.seg-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.seg-tab .badge { display: inline-block; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 16px; }
|
||||
/* 状态标签 */
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-red { background: #fff1f0; color: #ff4d4f; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
/* 应急卡片 */
|
||||
.emergency-card { background: #fff; border-radius: 12px; margin: 10px 16px 0; padding: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s; }
|
||||
.emergency-card:active { transform: scale(0.98); }
|
||||
.ec-top { display: flex; align-items: center; gap: 10px; }
|
||||
.ec-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #fff1f0, #ffccc7); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.ec-info { flex: 1; min-width: 0; }
|
||||
.ec-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.ec-name .age { font-size: 13px; font-weight: 400; color: #666; margin-left: 6px; }
|
||||
.ec-time { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:16px 20px 20px;flex-shrink:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="color:rgba(255,255,255,0.75);font-size:12px;margin-bottom:2px;">你好，张旭</div>
|
||||
<div style="color:rgba(255,255,255,0.82);font-size:12px;margin-bottom:4px;">所属应急中心：西安应急中心</div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">专业人员</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 统计数字 -->
|
||||
<div style="display:flex;">
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">进行中</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">已结束</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级Tab：进行中 / 已结束 -->
|
||||
<div class="seg-tabs" style="flex-shrink:0;">
|
||||
<div class="seg-tab active" onclick="switchTab(this,'panel-ongoing')">进行中<span class="badge" style="background:#fa8c16;">2</span></div>
|
||||
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已结束</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 进行中列表 -->
|
||||
<div id="panel-ongoing">
|
||||
<!-- [交互] 点击跳转至: ./emergency-chat-ongoing.html -->
|
||||
<div class="emergency-card" onclick="location.href='./emergency-chat-ongoing.html'">
|
||||
<div class="ec-top">
|
||||
<div class="ec-avatar">🚑</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-name">陈伟<span class="age">47岁</span></div>
|
||||
<div class="ec-time">求助时间：2026-04-23 14:30</div>
|
||||
</div>
|
||||
<span class="tag tag-blue">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./emergency-chat-ongoing.html -->
|
||||
<div class="emergency-card" onclick="location.href='./emergency-chat-ongoing.html'">
|
||||
<div class="ec-top">
|
||||
<div class="ec-avatar">🚑</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-name">刘海波<span class="age">55岁</span></div>
|
||||
<div class="ec-time">求助时间：2026-04-23 10:20</div>
|
||||
</div>
|
||||
<span class="tag tag-blue">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已结束列表 -->
|
||||
<div id="panel-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./emergency-chat-done.html -->
|
||||
<div class="emergency-card" onclick="location.href='./emergency-chat-done.html'">
|
||||
<div class="ec-top">
|
||||
<div class="ec-avatar">🚑</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-name">孙丽<span class="age">41岁</span></div>
|
||||
<div class="ec-time">求助时间：2026-04-22 16:00</div>
|
||||
<div class="ec-time">结束时间：2026-04-22 17:35</div>
|
||||
</div>
|
||||
<span class="tag tag-green">已结束</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./emergency-chat-done.html -->
|
||||
<div class="emergency-card" onclick="location.href='./emergency-chat-done.html'">
|
||||
<div class="ec-top">
|
||||
<div class="ec-avatar">🚑</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-name">周明<span class="age">33岁</span></div>
|
||||
<div class="ec-time">求助时间：2026-04-21 09:45</div>
|
||||
<div class="ec-time">结束时间：2026-04-21 11:20</div>
|
||||
</div>
|
||||
<span class="tag tag-green">已结束</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部5Tab导航栏 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="location.href='./index.html'"><span class="tab-icon">🏥</span><span class="tab-label">工作台</span><span class="tab-badge">2</span></div>
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'"><span class="tab-icon">📚</span><span class="tab-label">知识库</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../ai-assistant/index.html'"><span class="tab-icon">🤖</span><span class="tab-label">AI助手</span></div>
|
||||
<div class="tab-item" onclick="location.href='../../message/index.html'"><span class="tab-icon">💬</span><span class="tab-label">消息</span></div>
|
||||
<div class="tab-item" onclick="location.href='../profile/index.html'"><span class="tab-icon">👤</span><span class="tab-label">我的</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 标记当前角色为专业人员，供共用页面（消息、AI助手）判断返回目标 */
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
|
||||
/**
|
||||
* 切换二级Tab（进行中/已结束）
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 目标面板ID
|
||||
*/
|
||||
function switchTab(el, panelId) {
|
||||
document.querySelectorAll('.seg-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
el.classList.add('active');
|
||||
['panel-ongoing','panel-done'].forEach(function(id) {
|
||||
document.getElementById(id).style.display = id === panelId ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
var defaultTab = sessionStorage.getItem('professionalWorkbenchTab');
|
||||
if (defaultTab === 'done') {
|
||||
var doneTab = document.querySelectorAll('.seg-tab')[1];
|
||||
switchTab(doneTab, 'panel-done');
|
||||
sessionStorage.removeItem('professionalWorkbenchTab');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,203 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; position: relative; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(0,0,0,0.06); flex-shrink: 0; position: relative; z-index: 10; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
/* 地图区域 */
|
||||
.map-wrap { flex: 1; position: relative; overflow: hidden; }
|
||||
.map-bg { position: absolute; inset: 0; background: linear-gradient(160deg,#d6f4ff 0%,#e8f8e0 40%,#f0f6ff 100%); }
|
||||
.map-grid { position: absolute; inset: 0; opacity: .08; background: repeating-linear-gradient(0deg,transparent,transparent 39px,#69b1ff 39px,#69b1ff 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#69b1ff 39px,#69b1ff 40px); }
|
||||
.map-road-h { position: absolute; height: 4px; background: rgba(255,255,255,0.7); border-radius: 2px; }
|
||||
.map-road-v { position: absolute; width: 4px; background: rgba(255,255,255,0.7); border-radius: 2px; }
|
||||
/* 患者中心点 */
|
||||
.patient-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; }
|
||||
.patient-pin__dot { width: 16px; height: 16px; background: #ff4d4f; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(255,77,79,0.4); position: relative; z-index: 2; }
|
||||
.patient-pin__pulse { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,77,79,0.25); animation: pulse 2s infinite; z-index: 1; }
|
||||
@keyframes pulse { 0%{transform:translate(-50%,-50%) scale(1);opacity:.6;} 100%{transform:translate(-50%,-50%) scale(3.5);opacity:0;} }
|
||||
.patient-pin__label { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #fff; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; color: #ff4d4f; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
|
||||
/* 资源Tab栏 */
|
||||
.res-tabs { position: absolute; top: 8px; left: 0; right: 0; z-index: 8; display: flex; gap: 8px; padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
.res-tabs::-webkit-scrollbar { display: none; }
|
||||
.res-tab { flex-shrink: 0; padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 500; color: #333; background: rgba(255,255,255,0.92); box-shadow: 0 1px 4px rgba(0,0,0,0.1); cursor: pointer; border: 2px solid transparent; transition: all .2s; white-space: nowrap; }
|
||||
.res-tab--active { background: #1677ff; color: #fff; box-shadow: 0 2px 8px rgba(22,119,255,0.35); }
|
||||
/* 地图标记点 */
|
||||
.marker { position: absolute; z-index: 4; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform .15s; }
|
||||
.marker:active { transform: scale(1.15); }
|
||||
.marker__icon { width: 32px; height: 32px; border-radius: 50%; background: #1677ff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
|
||||
.marker__icon--hospital { background: #1677ff; }
|
||||
.marker__icon--partner { background: #722ed1; }
|
||||
.marker__icon--clinic { background: #13c2c2; }
|
||||
.marker__icon--ambulance { background: #ff4d4f; }
|
||||
.marker__icon--aed { background: #fa8c16; }
|
||||
.marker__icon--kit { background: #52c41a; }
|
||||
.marker__label { margin-top: 2px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.92); font-size: 10px; color: #333; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
|
||||
/* 底部资源卡片 */
|
||||
.res-card { position: absolute; bottom: 0; left: 0; right: 0; z-index: 12; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.12); padding: 16px; transform: translateY(100%); transition: transform .3s ease; }
|
||||
.res-card--show { transform: translateY(0); }
|
||||
.res-card__close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: #f5f5f5; border: none; font-size: 16px; color: #999; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.res-card__body { display: flex; gap: 12px; }
|
||||
.res-card__img { width: 80px; height: 80px; border-radius: 8px; background: #f0f5ff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; }
|
||||
.res-card__info { flex: 1; min-width: 0; }
|
||||
.res-card__name { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.res-card__org { font-size: 12px; color: #999; margin-bottom: 6px; }
|
||||
.res-card__row { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #666; margin-bottom: 3px; }
|
||||
.res-card__row svg { flex-shrink: 0; }
|
||||
.res-card__dist { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #e6f7ff; color: #1677ff; font-size: 11px; font-weight: 500; }
|
||||
.res-card__actions { display: flex; gap: 8px; margin-top: 12px; }
|
||||
.res-card__btn { flex: 1; height: 36px; border-radius: 8px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
|
||||
.res-card__btn--call { background: #1677ff; color: #fff; }
|
||||
.res-card__btn--nav { background: #f0f5ff; color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./emergency-chat-ongoing.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat-ongoing.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">患者定位</span>
|
||||
</div>
|
||||
|
||||
<div class="map-wrap" onclick="closeCard(event)">
|
||||
<div class="map-bg"></div>
|
||||
<div class="map-grid"></div>
|
||||
<div class="map-road-h" style="top:28%;left:5%;width:90%;"></div>
|
||||
<div class="map-road-h" style="top:55%;left:10%;width:75%;"></div>
|
||||
<div class="map-road-h" style="top:78%;left:15%;width:65%;"></div>
|
||||
<div class="map-road-v" style="left:30%;top:8%;height:80%;"></div>
|
||||
<div class="map-road-v" style="left:55%;top:5%;height:88%;"></div>
|
||||
<div class="map-road-v" style="left:78%;top:12%;height:70%;"></div>
|
||||
|
||||
<!-- 患者中心点 -->
|
||||
<div class="patient-pin">
|
||||
<div class="patient-pin__pulse"></div>
|
||||
<div class="patient-pin__dot"></div>
|
||||
<div class="patient-pin__label">西安市雁塔区电子一路96号香山红叶</div>
|
||||
</div>
|
||||
|
||||
<!-- 资源Tab栏 -->
|
||||
<div class="res-tabs" id="resTabs">
|
||||
<div class="res-tab res-tab--active" data-type="hospital" onclick="switchTab(this)">油田医院</div>
|
||||
<div class="res-tab" data-type="partner" onclick="switchTab(this)">合作医院</div>
|
||||
<div class="res-tab" data-type="clinic" onclick="switchTab(this)">医疗点</div>
|
||||
<div class="res-tab" data-type="ambulance" onclick="switchTab(this)">救护车</div>
|
||||
<div class="res-tab" data-type="aed" onclick="switchTab(this)">AED</div>
|
||||
<div class="res-tab" data-type="kit" onclick="switchTab(this)">急救包</div>
|
||||
</div>
|
||||
|
||||
<!-- 资源坐标点容器 -->
|
||||
<div id="markers"></div>
|
||||
|
||||
<!-- 底部资源卡片 -->
|
||||
<div class="res-card" id="resCard">
|
||||
<button class="res-card__close" onclick="closeCard(event)">✕</button>
|
||||
<div class="res-card__body">
|
||||
<div class="res-card__img" id="cardImg">🏥</div>
|
||||
<div class="res-card__info">
|
||||
<div class="res-card__name" id="cardName">-</div>
|
||||
<div class="res-card__org" id="cardOrg">-</div>
|
||||
<div class="res-card__row"><span class="res-card__dist" id="cardDist">-</span></div>
|
||||
<div class="res-card__row" id="cardPhone">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
|
||||
<span id="cardPhoneText">-</span>
|
||||
</div>
|
||||
<div class="res-card__row" id="cardAddr">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
<span id="cardAddrText">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var DATA = {
|
||||
hospital: [
|
||||
{ name:'长庆油田职工医院', org:'长庆油田公司', dist:'1.2km', phone:'0911-8812345', addr:'延安市宝塔区长庆路88号', icon:'🏥', top:'32%', left:'22%' },
|
||||
{ name:'采油一厂职工医院', org:'采油一厂', dist:'2.8km', phone:'0911-8823456', addr:'延安市安塞区油田大道12号', icon:'🏥', top:'18%', left:'68%' }
|
||||
],
|
||||
partner: [
|
||||
{ name:'延安大学附属医院', org:'延安大学', dist:'3.5km', phone:'0911-2888100', addr:'延安市宝塔区北大街43号', icon:'🏨', top:'25%', left:'75%' },
|
||||
{ name:'延安市人民医院', org:'延安市卫健委', dist:'4.1km', phone:'0911-2113456', addr:'延安市宝塔区七里铺街42号', icon:'🏨', top:'70%', left:'20%' }
|
||||
],
|
||||
clinic: [
|
||||
{ name:'第一作业区医疗点', org:'采油一厂', dist:'0.5km', phone:'0911-8834567', addr:'安塞区第一作业区生活基地', icon:'🩺', top:'45%', left:'38%' },
|
||||
{ name:'集气站医疗点', org:'采气一厂', dist:'1.8km', phone:'0911-8845678', addr:'安塞区王窑集气站', icon:'🩺', top:'62%', left:'65%' }
|
||||
],
|
||||
ambulance: [
|
||||
{ name:'陕A·120E8', org:'长庆油田职工医院', dist:'0.8km', phone:'0911-8801120', addr:'当前位置：长庆路与延河路交叉口', icon:'🚑', top:'40%', left:'60%' },
|
||||
{ name:'陕A·120F3', org:'延安市急救中心', dist:'3.2km', phone:'0911-2881120', addr:'当前位置：宝塔区政府附近', icon:'🚑', top:'22%', left:'40%' }
|
||||
],
|
||||
aed: [
|
||||
{ name:'一厂办公楼AED', org:'采油一厂', dist:'0.3km', phone:'0911-8856789', addr:'采油一厂办公楼一层大厅', icon:'⚡', top:'48%', left:'25%' },
|
||||
{ name:'职工活动中心AED', org:'长庆油田公司', dist:'1.5km', phone:'0911-8867890', addr:'长庆油田职工活动中心入口', icon:'⚡', top:'35%', left:'48%' }
|
||||
],
|
||||
kit: [
|
||||
{ name:'井站急救包-W012', org:'采油一厂', dist:'0.2km', phone:'0911-8878901', addr:'王窑作业区W012井站', icon:'🧰', top:'52%', left:'70%' },
|
||||
{ name:'值班室急救包', org:'采油一厂', dist:'0.6km', phone:'0911-8889012', addr:'第一作业区值班室', icon:'🧰', top:'68%', left:'42%' }
|
||||
]
|
||||
};
|
||||
var ICON_CLS = { hospital:'hospital', partner:'partner', clinic:'clinic', ambulance:'ambulance', aed:'aed', kit:'kit' };
|
||||
var markersEl = document.getElementById('markers');
|
||||
var cardEl = document.getElementById('resCard');
|
||||
var curType = 'hospital';
|
||||
|
||||
function renderMarkers(type) {
|
||||
markersEl.innerHTML = '';
|
||||
var list = DATA[type] || [];
|
||||
list.forEach(function(item, i) {
|
||||
var m = document.createElement('div');
|
||||
m.className = 'marker';
|
||||
m.style.top = item.top;
|
||||
m.style.left = item.left;
|
||||
m.innerHTML = '<div class="marker__icon marker__icon--' + ICON_CLS[type] + '">' + item.icon + '</div><div class="marker__label">' + item.name + '</div>';
|
||||
m.onclick = function(e) { e.stopPropagation(); showCard(item, type); };
|
||||
markersEl.appendChild(m);
|
||||
});
|
||||
}
|
||||
|
||||
function showCard(item, type) {
|
||||
document.getElementById('cardImg').textContent = item.icon;
|
||||
document.getElementById('cardName').textContent = item.name;
|
||||
document.getElementById('cardOrg').textContent = item.org;
|
||||
document.getElementById('cardDist').textContent = '距患者 ' + item.dist;
|
||||
document.getElementById('cardPhoneText').textContent = item.phone;
|
||||
document.getElementById('cardAddrText').textContent = item.addr;
|
||||
cardEl.classList.add('res-card--show');
|
||||
}
|
||||
|
||||
function closeCard(e) {
|
||||
if (e && e.target.closest && e.target.closest('.marker')) return;
|
||||
cardEl.classList.remove('res-card--show');
|
||||
}
|
||||
|
||||
function switchTab(el) {
|
||||
var tabs = document.querySelectorAll('.res-tab');
|
||||
tabs.forEach(function(t) { t.classList.remove('res-tab--active'); });
|
||||
el.classList.add('res-tab--active');
|
||||
curType = el.getAttribute('data-type');
|
||||
cardEl.classList.remove('res-card--show');
|
||||
renderMarkers(curType);
|
||||
}
|
||||
|
||||
renderMarkers(curType);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.form-card { background: #fff; border-radius: 12px; margin: 12px 16px 0; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.field-label { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.field-label .required { color: #ff4d4f; margin-left: 2px; }
|
||||
.field-input, .field-select, .field-textarea { width: 100%; border: 1px solid #d9d9d9; border-radius: 8px; font-size: 14px; color: #1a1a1a; outline: none; font-family: inherit; background: #fff; }
|
||||
.field-input, .field-select { height: 40px; padding: 0 12px; }
|
||||
.field-textarea { min-height: 108px; padding: 10px 12px; resize: none; line-height: 1.6; }
|
||||
.field-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%); background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
|
||||
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.chip { padding: 6px 12px; border-radius: 16px; background: #f5f5f5; color: #666; font-size: 12px; cursor: pointer; }
|
||||
.chip.active { background: #e6f4ff; color: #1677ff; font-weight: 600; }
|
||||
.submit-bar { padding: 12px 16px 18px; background: #fff; border-top: 1px solid #f0f0f0; }
|
||||
.submit-btn { width: 100%; height: 44px; border: none; border-radius: 10px; background: linear-gradient(135deg,#52C41A,#389e0d); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./emergency-chat-ongoing.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat-ongoing.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">救助意见</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="form-card" style="background:linear-gradient(135deg,#fff7e6,#fff1f0);border:1px solid #ffe7ba;">
|
||||
<div style="font-size:12px;color:#999;margin-bottom:6px;">患者信息</div>
|
||||
<div style="font-size:16px;font-weight:700;color:#1a1a1a;">张小红 · 女 · 45岁</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:6px;line-height:1.6;">采油一厂 · 第一作业区</div>
|
||||
<!-- <div style="font-size:12px;color:#666;line-height:1.6;">当前症状：胸口闷痛、呼吸困难、伴出汗</div>-->
|
||||
</div>
|
||||
|
||||
<div class="form-card">
|
||||
<div class="field-label">救助意见<span class="required">*</span></div>
|
||||
<textarea class="field-textarea" placeholder="请输入救助意见...">建议立即送往最近医院急诊科进行头颅CT检查，排除脑血管意外可能。</textarea>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="submit-bar">
|
||||
<!-- [交互] 点击提交后返回: ./emergency-chat-ongoing.html -->
|
||||
<button class="submit-btn" onclick="location.href='./emergency-chat-ongoing.html'">发送救助意见</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
document.querySelectorAll('.chip').forEach(function(chip) {
|
||||
chip.addEventListener('click', function() {
|
||||
chip.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
|
||||
.info-item { display: flex; font-size: 13px; line-height: 1.6; padding: 5px 0; }
|
||||
.info-item__label { color: #999; min-width: 72px; flex-shrink: 0; }
|
||||
.info-item__value { color: #333; flex: 1; word-break: break-all; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.location-link { color: #1677ff; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.desc-block { padding: 6px 0; }
|
||||
.desc-block__label { font-size: 13px; color: #999; margin-bottom: 4px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 6px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; opacity: .7; }
|
||||
.summary-list { list-style: none; padding: 0; margin: 0; }
|
||||
.summary-item { font-size: 13px; color: #333; line-height: 1.8; padding: 3px 0; display: flex; gap: 4px; }
|
||||
.summary-item__idx { color: #999; flex-shrink: 0; }
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 0 12px; }
|
||||
.empty-state__icon { font-size: 36px; margin-bottom: 8px; opacity: .35; }
|
||||
.empty-state__text { font-size: 13px; color: #bbb; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./emergency-chat-ongoing.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat-ongoing.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">工单详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 基本信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">基本信息</div>
|
||||
<div class="info-item"><span class="info-item__label">工单编号</span><span class="info-item__value">YJ5633280</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单类型</span><span class="info-item__value">正常派单</span></div>
|
||||
<div class="info-item"><span class="info-item__label">应急中心</span><span class="info-item__value">西安应急中心</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助员工</span><span class="info-item__value">陈伟（EMP-71023）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value">采油一厂</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属部门</span><span class="info-item__value">第一作业区</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助方式</span><span class="info-item__value">应急视频</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-04-23 14:30:00</span></div>
|
||||
<div class="info-item"><span class="info-item__label">位置信息</span><span class="info-item__value"><span class="location-link"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省庆阳市华池县采油一厂作业区</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">操作人员</span><span class="info-item__value">刘旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">专业人员</span><span class="info-item__value">张旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单状态</span><span class="info-item__value"><span class="tag tag-blue">进行中</span></span></div>
|
||||
</div>
|
||||
|
||||
<!-- 救助信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">救助信息</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助意见：</div>
|
||||
<div class="desc-block__text">-</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助结果：</div>
|
||||
<div class="desc-block__text" style="color:#999;">-</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">相关照片：</div>
|
||||
<div class="photo-list">
|
||||
<div class="photo-item">现场照片 1</div>
|
||||
<div class="photo-item">现场照片 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">补充小结：</div>
|
||||
<ul class="summary-list">
|
||||
<li class="summary-item"><span class="summary-item__idx">1.</span><span>接到求助后远程指导患者制动并冰敷左膝</span></li>
|
||||
<li class="summary-item"><span class="summary-item__idx">2.</span><span>已联系操作人员安排驻场人员前往现场协助转运</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 派单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">📋</div>
|
||||
<div class="empty-state__text">暂无派单信息</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 救护车支援 -->
|
||||
<div class="card">
|
||||
<div class="card__title">救护车支援</div>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">🚑</div>
|
||||
<div class="empty-state__text">暂无救护车支援信息</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; margin: 12px 16px 0; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
|
||||
.info-item { display: flex; font-size: 13px; line-height: 1.6; padding: 5px 0; }
|
||||
.info-item__label { color: #999; min-width: 72px; flex-shrink: 0; }
|
||||
.info-item__value { color: #333; flex: 1; word-break: break-all; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.location-link { color: #1677ff; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.desc-block { padding: 6px 0; }
|
||||
.desc-block__label { font-size: 13px; color: #999; margin-bottom: 4px; }
|
||||
.desc-block__text { font-size: 13px; color: #333; line-height: 1.8; }
|
||||
.photo-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
|
||||
.photo-item { width: 90px; height: 68px; border-radius: 6px; background: linear-gradient(135deg, #e6f7ff, #bae7ff); border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1677ff; opacity: .7; }
|
||||
.summary-list { list-style: none; padding: 0; margin: 0; }
|
||||
.summary-item { font-size: 13px; color: #333; line-height: 1.8; padding: 3px 0; display: flex; gap: 4px; }
|
||||
.summary-item__idx { color: #999; flex-shrink: 0; }
|
||||
.footer-bar { padding: 12px 16px 18px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.action-btn { width: 100%; height: 44px; border: none; border-radius: 10px; background: #1677ff; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./emergency-chat-done.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat-done.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">工单详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">基本信息</div>
|
||||
<div class="info-item"><span class="info-item__label">工单编号</span><span class="info-item__value">YJ5633256</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单类型</span><span class="info-item__value">正常派单</span></div>
|
||||
<div class="info-item"><span class="info-item__label">应急中心</span><span class="info-item__value">西安应急中心</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助员工</span><span class="info-item__value">王旭（EMP-56985）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属单位</span><span class="info-item__value">公司机关</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属部门</span><span class="info-item__value">健康科</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助方式</span><span class="info-item__value">应急视频</span></div>
|
||||
<div class="info-item"><span class="info-item__label">求助时间</span><span class="info-item__value">2026-03-21 15:12:21</span></div>
|
||||
<div class="info-item"><span class="info-item__label">位置信息</span><span class="info-item__value"><span class="location-link"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1C5.24 1 3 3.24 3 6c0 3.75 5 7 5 7s5-3.25 5-7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>陕西省西安市雁塔区电子一路56号</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">操作人员</span><span class="info-item__value">刘旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">专业人员</span><span class="info-item__value">刘旭</span></div>
|
||||
<div class="info-item"><span class="info-item__label">工单状态</span><span class="info-item__value"><span class="tag tag-green">已完成</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">完成时间</span><span class="info-item__value">2026-03-21 16:45:00</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 救助信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">救助信息</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助意见：</div>
|
||||
<div class="desc-block__text">建议立即送往最近医院急诊科进行头颅CT检查，排除脑血管意外可能。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">救助结果：</div>
|
||||
<div class="desc-block__text">员工已送达长庆油田职工医院急诊科，完成头颅CT检查，排除脑出血，诊断为高血压引起的眩晕，已开具降压药物并留观。</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">相关照片：</div>
|
||||
<div class="photo-list">
|
||||
<div class="photo-item">现场照片 1</div>
|
||||
<div class="photo-item">现场照片 2</div>
|
||||
<div class="photo-item">现场照片 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">补充小结：</div>
|
||||
<ul class="summary-list">
|
||||
<li class="summary-item"><span class="summary-item__idx">1.</span><span>接到应急求助后立即抵达现场，员工突发头晕伴恶心呕吐</span></li>
|
||||
<li class="summary-item"><span class="summary-item__idx">2.</span><span>现场监测体征异常，初步处置无效，联系驻场人员陪同就医</span></li>
|
||||
<li class="summary-item"><span class="summary-item__idx">3.</span><span>已完成头颅CT检测，员工由同事留守陪护，已告知家属及部门负责人</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 派单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">派单信息</div>
|
||||
<div class="info-item"><span class="info-item__label">派单时间</span><span class="info-item__value">2026-03-21 15:18:00</span></div>
|
||||
<div class="info-item"><span class="info-item__label">驻场人员</span><span class="info-item__value">王希（138-9201-3001）</span></div>
|
||||
<div class="info-item"><span class="info-item__label">派单状态</span><span class="info-item__value"><span class="tag tag-green">已完成</span></span></div>
|
||||
<div class="info-item"><span class="info-item__label">结束时间</span><span class="info-item__value">2026-03-21 16:40:00</span></div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">派单说明：</div>
|
||||
<div class="desc-block__text">给这个员工紧急挂号就诊，需要拍头颅CT</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-block__label">驻场说明：</div>
|
||||
<div class="desc-block__text">已经挂号并且开了头颅CT检查单，已陪同就诊完毕，员工状态稳定</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 救护车支援 -->
|
||||
<div class="card">
|
||||
<div class="card__title">救护车支援</div>
|
||||
<div class="info-item"><span class="info-item__label">车牌号</span><span class="info-item__value">陕A·120-01</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属医疗点</span><span class="info-item__value">长庆油田职工医疗点</span></div>
|
||||
<div class="info-item"><span class="info-item__label">所属机构</span><span class="info-item__value">长庆油田职工医院</span></div>
|
||||
<div class="info-item"><span class="info-item__label">驾驶人</span><span class="info-item__value">李强</span></div>
|
||||
<div class="info-item"><span class="info-item__label">驾驶人电话</span><span class="info-item__value">138-9101-2001</span></div>
|
||||
<div class="info-item"><span class="info-item__label">随行人</span><span class="info-item__value">张伟</span></div>
|
||||
<div class="info-item"><span class="info-item__label">随行人电话</span><span class="info-item__value">138-9201-5001</span></div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="footer-bar">-->
|
||||
<!-- <!– [交互] 点击跳转至: ./emergency-chat.html –>-->
|
||||
<!-- <button class="action-btn" onclick="location.href='./emergency-chat.html'">进入应急会话</button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'professional');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,6 +18,7 @@
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.status-area { padding: 32px 16px 24px; text-align: center; background: #fff; }
|
||||
.status-area__title { font-size: 22px; font-weight: 700; color: #999; margin-bottom: 8px; }
|
||||
.status-area__desc { font-size: 14px; color: #999; line-height: 1.8; }
|
||||
.info-card { background: #fff; margin: 12px 16px; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.info-card__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
|
||||
@@ -42,21 +43,19 @@
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="status-area">
|
||||
<div class="status-area__title">个人取消</div>
|
||||
<div class="status-area__title">员工取消</div>
|
||||
<div class="status-area__desc">取消时间：2026-08-21 15:34:32</div>
|
||||
<div class="status-area__desc">取消原因：没有时间去了</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">神经内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">张学强</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24</span></div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">取消信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">创建时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">取消时间</span><span class="info-card__value">2026-08-21 15:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">取消原因</span><span class="info-card__value">没有时间去了</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">反复头痛头晕半年，需神经内科排查</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
@@ -39,6 +39,10 @@
|
||||
.modal__btn { flex: 1; height: 40px; border-radius: 20px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; }
|
||||
.modal__btn--cancel { background: #f5f5f5; color: #666; }
|
||||
.modal__btn--confirm { background: #ff4d4f; color: #fff; }
|
||||
.modal__btn--confirm.disabled { background: #ffb3b3; pointer-events: none; }
|
||||
.modal__textarea { width: 100%; height: 80px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 10px; font-size: 14px; resize: none; margin-bottom: 16px; font-family: inherit; }
|
||||
.modal__textarea::placeholder { color: #bbb; }
|
||||
.modal__textarea:focus { outline: none; border-color: #1677ff; }
|
||||
.bottom-spacer { height: 100px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -62,12 +66,13 @@
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">神经内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">张学强</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">反复头痛头晕半年，需神经内科排查</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-btns">
|
||||
@@ -79,10 +84,10 @@
|
||||
<div class="modal-mask" id="cancelModal">
|
||||
<div class="modal">
|
||||
<div class="modal__title">确认取消预约？</div>
|
||||
<!-- <div class="modal__desc">取消后需要重新发起预约申请</div>-->
|
||||
<textarea class="modal__textarea" id="cancelReason" placeholder="请输入取消原因" oninput="document.getElementById('confirmCancelBtn').classList.toggle('disabled', !this.value.trim())"></textarea>
|
||||
<div class="modal__btns">
|
||||
<button class="modal__btn modal__btn--cancel" onclick="document.getElementById('cancelModal').classList.remove('modal-mask--show')">再想想</button>
|
||||
<button class="modal__btn modal__btn--confirm" onclick="window.location.href='appointment-list.html'">确认取消</button>
|
||||
<button class="modal__btn modal__btn--confirm disabled" id="confirmCancelBtn" onclick="window.location.href='appointment-list.html'">确认取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,12 +49,14 @@
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">神经内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">张学强</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">反复头痛头晕半年，需神经内科排查</span></div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">挂号结果</div>
|
||||
|
||||
@@ -37,6 +37,10 @@
|
||||
.modal__btn { flex: 1; height: 40px; border-radius: 20px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; }
|
||||
.modal__btn--cancel { background: #f5f5f5; color: #666; }
|
||||
.modal__btn--confirm { background: #ff4d4f; color: #fff; }
|
||||
.modal__btn--confirm.disabled { background: #ffb3b3; pointer-events: none; }
|
||||
.modal__textarea { width: 100%; height: 80px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 10px; font-size: 14px; resize: none; margin-bottom: 16px; font-family: inherit; }
|
||||
.modal__textarea::placeholder { color: #bbb; }
|
||||
.modal__textarea:focus { outline: none; border-color: #1677ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -59,12 +63,14 @@
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">预约信息</div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
|
||||
<div class="info-card__row"><span class="info-card__label">预约医院</span><span class="info-card__value">空军军医大学西京医院</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">科室</span><span class="info-card__value">神经内科</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">医生</span><span class="info-card__value">张学强</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">挂号类别</span><span class="info-card__value">专家号</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">发起预约时间</span><span class="info-card__value">2026-08-21 13:34:32</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">期望预约时间</span><span class="info-card__value">2026-09-24 15:00</span></div>
|
||||
<div class="info-card__row"><span class="info-card__label">病情描述</span><span class="info-card__value">反复头痛头晕半年，需神经内科排查</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bottom-btn" onclick="document.getElementById('cancelModal').classList.add('modal-mask--show')">取消预约</button>
|
||||
@@ -73,10 +79,10 @@
|
||||
<div class="modal-mask" id="cancelModal">
|
||||
<div class="modal">
|
||||
<div class="modal__title">确认取消预约？</div>
|
||||
<!-- <div class="modal__desc">取消后需要重新发起预约申请</div>-->
|
||||
<textarea class="modal__textarea" id="cancelReason" placeholder="请输入取消原因" oninput="document.getElementById('confirmCancelBtn').classList.toggle('disabled', !this.value.trim())"></textarea>
|
||||
<div class="modal__btns">
|
||||
<button class="modal__btn modal__btn--cancel" onclick="document.getElementById('cancelModal').classList.remove('modal-mask--show')">再想想</button>
|
||||
<button class="modal__btn modal__btn--confirm" onclick="window.location.href='appointment-list.html'">确认取消</button>
|
||||
<button class="modal__btn modal__btn--confirm disabled" id="confirmCancelBtn" onclick="window.location.href='appointment-list.html'">确认取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -46,15 +46,15 @@
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">全部</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">进行中</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">待确认</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-confirmed.html'">已确认</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-done.html'">已完成</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">已取消</div>
|
||||
</div>
|
||||
<div class="card" onclick="window.location.href='appointment-detail-cancelled.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--self-cancel">个人取消</span>
|
||||
<span class="card__status card__status--self-cancel">员工取消</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>科室：神经内科</div>
|
||||
@@ -66,7 +66,7 @@
|
||||
<div class="card" onclick="window.location.href='appointment-detail-cancelled.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--admin-cancel">管理人员取消</span>
|
||||
<span class="card__status card__status--self-cancel">管理人员取消</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>科室：神经内科</div>
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
<!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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.new-btn { display: block; width: calc(100% - 32px); height: 44px; background: #1677ff; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; position: absolute; bottom: 34px; left: 16px; z-index: 10; }
|
||||
.tab-bar { display: flex; background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
|
||||
.tab-bar__item { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.tab-bar__item--active { color: #1677ff; font-weight: 600; border-bottom-color: #1677ff; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__hospital { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.card__status--confirmed { background: #e6f7ff; color: #1677ff; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__tip { font-size: 12px; color: #999; margin-top: 6px; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="window.location.href='index.html'">‹</span>
|
||||
<span class="nav-title">大病就医预约</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">待确认</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">已确认</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-done.html'">已完成</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-cancelled.html'">已取消</div>
|
||||
</div>
|
||||
<div class="card" onclick="window.location.href='appointment-detail-confirmed.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--confirmed">已确认</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>科室：神经内科</div>
|
||||
<div>医生：张学强</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-09-24</div>
|
||||
</div>
|
||||
<div class="card__tip">已派单至驻场人员(张旭)</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="new-btn" onclick="window.location.href='appointment-form.html'">发起新的预约</button>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -46,8 +46,8 @@
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">全部</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">进行中</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list.html'">待确认</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-confirmed.html'">已确认</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">已完成</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-cancelled.html'">已取消</div>
|
||||
</div>
|
||||
|
||||
@@ -47,8 +47,8 @@
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="tab-bar">
|
||||
<div class="tab-bar__item ">全部</div>
|
||||
<div class="tab-bar__item tab-bar__item--active" onclick="window.location.href='appointment-list.html'">进行中</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">待确认</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-confirmed.html'">已确认</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-done.html'">已完成</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='appointment-list-cancelled.html'">已取消</div>
|
||||
</div>
|
||||
@@ -66,20 +66,6 @@
|
||||
</div>
|
||||
<div class="card__tip">请耐心等待管理人员进行确认</div>
|
||||
</div>
|
||||
<!-- 卡片2：已确认 -->
|
||||
<div class="card" onclick="window.location.href='appointment-detail-confirmed.html'">
|
||||
<div class="card__header">
|
||||
<span class="card__hospital">空军军医大学西京医院</span>
|
||||
<span class="card__status card__status--confirmed">已确认</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div>科室：神经内科</div>
|
||||
<div>医生：张学强</div>
|
||||
<div>挂号类别：专家号</div>
|
||||
<div>期望预约时间：2026-09-24</div>
|
||||
</div>
|
||||
<div class="card__tip">已派单至驻场人员(张旭)</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="new-btn" onclick="window.location.href='appointment-form.html'">发起新的预约</button>
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
> **所属端**：员工端 APP
|
||||
> **模块路径**：`employee-app/emergency-medical/`
|
||||
> **最后更新**：2026-04-23
|
||||
> **最后更新**：2026-04-27
|
||||
|
||||
## 模块概述
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
│ ├── 应急视频通话
|
||||
│ └── 应急电话（系统电话，将云坐席号码带入到拨号页面）
|
||||
├── 大病就医预约
|
||||
│ ├── 预约列表（进行中(待确认/已确认)/已完成/已取消）
|
||||
│ ├── 预约列表（待确认/已确认/已完成/已取消）
|
||||
│ ├── 发起预约（表单）
|
||||
│ └── 预约详情（待确认/已确认/已完成/已取消）
|
||||
├── 急救教学视频
|
||||
@@ -85,14 +85,15 @@ stateDiagram-v2
|
||||
|
||||
| 序号 | 页面/弹窗 | 文件 | 类型 |
|
||||
|------|-----------|------|------|
|
||||
| 16 | 预约列表（进行中） | appointment-list.html | 页面 |
|
||||
| 17 | 预约列表（已完成） | appointment-list-done.html | 页面 |
|
||||
| 18 | 预约列表（已取消） | appointment-list-cancelled.html | 页面 |
|
||||
| 19 | 发起预约 | appointment-form.html | 页面 |
|
||||
| 20 | 预约详情-待确认 | appointment-detail-pending.html | 页面 |
|
||||
| 21 | 预约详情-已确认 | appointment-detail-confirmed.html | 页面 |
|
||||
| 22 | 预约详情-已完成 | appointment-detail-done.html | 页面 |
|
||||
| 23 | 预约详情-已取消 | appointment-detail-cancelled.html | 页面 |
|
||||
| 16 | 预约列表（待确认） | appointment-list.html | 页面 |
|
||||
| 17 | 预约列表（已确认） | appointment-list-confirmed.html | 页面 |
|
||||
| 18 | 预约列表（已完成） | appointment-list-done.html | 页面 |
|
||||
| 19 | 预约列表（已取消） | appointment-list-cancelled.html | 页面 |
|
||||
| 20 | 发起预约 | appointment-form.html | 页面 |
|
||||
| 21 | 预约详情-待确认 | appointment-detail-pending.html | 页面 |
|
||||
| 22 | 预约详情-已确认 | appointment-detail-confirmed.html | 页面 |
|
||||
| 23 | 预约详情-已完成 | appointment-detail-done.html | 页面 |
|
||||
| 24 | 预约详情-已取消 | appointment-detail-cancelled.html | 页面 |
|
||||
|
||||
---
|
||||
|
||||
@@ -346,27 +347,44 @@ stateDiagram-v2
|
||||
|
||||
## 五、大病就医预约
|
||||
|
||||
### 16. 预约列表-进行中（appointment-list.html）
|
||||
### 16. 预约列表-待确认（appointment-list.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示员工的大病就医预约记录列表，默认显示进行中的预约，支持Tab切换查看不同状态。
|
||||
**功能说明：** 展示员工的大病就医预约记录列表，按状态分 Tab 展示，当前页为"待确认"Tab，仅显示待确认状态的预约卡片。
|
||||
|
||||
**业务规则：**
|
||||
- Tab栏：全部（默认激活，根据状态和时间双重倒序）、进行中、已完成、已取消
|
||||
- 预约卡片展示：医院名称、状态标签、科室、医生、挂号类别、期望预约时间
|
||||
- 进行中状态包含"待确认"和"已确认"两种子状态
|
||||
- 底部提供"发起新预约"按钮
|
||||
- Tab栏：待确认（默认激活）、已确认、已完成、已取消，每个 Tab 对应独立页面
|
||||
- 预约卡片展示：医院名称、状态标签（橙色"待确认"）、科室、医生、挂号类别、期望预约时间
|
||||
- 卡片底部提示文字："请耐心等待管理人员进行确认"
|
||||
- 底部提供"发起新的预约"按钮
|
||||
|
||||
**交互说明：**
|
||||
- 点击Tab栏切换不同状态的预约列表
|
||||
- 点击预约卡片，跳转到对应状态的预约详情页面
|
||||
- 点击"发起新预约"按钮，跳转到预约表单页面
|
||||
- 点击Tab栏切换到对应状态的预约列表页面
|
||||
- 点击预约卡片，跳转到待确认预约详情页面
|
||||
- 点击"发起新的预约"按钮，跳转到预约表单页面
|
||||
- 点击返回箭头，返回应急就医主页
|
||||
|
||||
---
|
||||
|
||||
### 17. 预约列表-已完成（appointment-list-done.html）
|
||||
### 17. 预约列表-已确认（appointment-list-confirmed.html）
|
||||
|
||||
|
||||
|
||||
**功能说明：** 展示已确认状态的预约记录列表。
|
||||
|
||||
**业务规则：**
|
||||
- "已确认"Tab激活，列表展示已确认的预约卡片
|
||||
- 状态标签显示蓝色"已确认"
|
||||
- 卡片底部显示"已派单至驻场人员(姓名)"提示
|
||||
|
||||
**交互说明：**
|
||||
- 点击预约卡片，跳转到已确认预约详情页面
|
||||
- 其他交互同预约列表-待确认
|
||||
|
||||
---
|
||||
|
||||
### 18. 预约列表-已完成（appointment-list-done.html）
|
||||
|
||||
|
||||
|
||||
@@ -375,15 +393,15 @@ stateDiagram-v2
|
||||
**业务规则：**
|
||||
- "已完成"Tab激活，列表展示已完成的预约卡片
|
||||
- 状态标签显示绿色"已完成"
|
||||
- 卡片下方显示"驻场人员已完成挂号"提示
|
||||
- 卡片底部显示"驻场人员已完成挂号"提示
|
||||
|
||||
**交互说明：**
|
||||
- 点击预约卡片，跳转到已完成预约详情页面
|
||||
- 其他交互同预约列表-进行中
|
||||
- 其他交互同预约列表-待确认
|
||||
|
||||
---
|
||||
|
||||
### 18. 预约列表-已取消（appointment-list-cancelled.html）
|
||||
### 19. 预约列表-已取消（appointment-list-cancelled.html）
|
||||
|
||||
|
||||
|
||||
@@ -391,16 +409,15 @@ stateDiagram-v2
|
||||
|
||||
**业务规则：**
|
||||
- "已取消"Tab激活，列表展示已取消的预约卡片
|
||||
- 状态标签显示灰色"已取消"
|
||||
- 支持区分"个人取消"和"管理人员取消"两种取消来源
|
||||
- 支持区分"员工取消"（灰色标签）和"管理人员取消"（红色标签）两种取消来源
|
||||
|
||||
**交互说明：**
|
||||
- 点击预约卡片，跳转到已取消预约详情页面
|
||||
- 其他交互同预约列表-进行中
|
||||
- 其他交互同预约列表-待确认
|
||||
|
||||
---
|
||||
|
||||
### 19. 发起预约（appointment-form.html）
|
||||
### 20. 发起预约（appointment-form.html）
|
||||
|
||||
|
||||
|
||||
@@ -413,15 +430,15 @@ stateDiagram-v2
|
||||
|
||||
**表单字段表：**
|
||||
|
||||
| 字段名 | 类型 | 必填 | 校验规则 |
|
||||
|--------|--------------|------|----------|
|
||||
| 预约医院 | 下拉选择 | 是 | 从系统配置医院列表中选择 |
|
||||
| 就诊卡号 | 文本输入 | 否 | 无 |
|
||||
| 挂号类别 | 下拉选择 | 是 | 专家号/普通号 |
|
||||
| 字段名 | 类型 | 必填 | 校验规则 |
|
||||
|--------|------|------|----------|
|
||||
| 预约医院 | 下拉选择 | 是 | 从系统配置医院列表中选择 |
|
||||
| 就诊卡号 | 文本输入 | 否 | 无 |
|
||||
| 挂号类别 | 下拉选择 | 是 | 专家号/普通号 |
|
||||
| 期望预约时间 | 日期时间选择，精确到时分 | 是 | 不可选择过去时间 |
|
||||
| 预约科室 | 文本输入 | 是 | 无 |
|
||||
| 预约医生 | 文本输入 | 是 | 无 |
|
||||
| 病情描述 | 多行文本 | 是 | 无 |
|
||||
| 预约科室 | 文本输入 | 是 | 无 |
|
||||
| 预约医生 | 文本输入 | 是 | 无 |
|
||||
| 病情描述 | 多行文本 | 是 | 无 |
|
||||
|
||||
**交互说明：**
|
||||
- 填写完成后点击"确定"按钮提交预约
|
||||
@@ -430,7 +447,7 @@ stateDiagram-v2
|
||||
|
||||
---
|
||||
|
||||
### 20-23. 预约详情（4种状态页面）
|
||||
### 21-24. 预约详情（4种状态页面）
|
||||
|
||||
|
||||
|
||||
@@ -441,7 +458,7 @@ stateDiagram-v2
|
||||
|
||||
**通用结构：**
|
||||
- 顶部状态区：状态大标题 + 状态说明文字
|
||||
- 预约信息卡片：预约医院、科室、医生、挂号类别、期望预约时间、发起预约时间
|
||||
- 预约信息卡片：发起预约时间、预约医院、科室、医生、挂号类别、期望预约时间、病情描述
|
||||
|
||||
**各状态差异：**
|
||||
|
||||
@@ -449,18 +466,18 @@ stateDiagram-v2
|
||||
|------|--------|----------|----------|----------|----------|
|
||||
| 待确认 | appointment-detail-pending.html | 橙色 | 请耐心等待管理人员进行确认 | 取消预约（红色边框） | 无 |
|
||||
| 已确认 | appointment-detail-confirmed.html | 蓝色 | 已派单至驻场人员(姓名) | 取消预约 + 联系驻场人员 | 无 |
|
||||
| 已完成 | appointment-detail-done.html | 绿色 | 驻场人员已完成挂号 | 联系驻场人员 | 挂号结果卡片 |
|
||||
| 已取消 | appointment-detail-cancelled.html | 灰色 | 个人取消 / 管理人员取消 | 无 | 取消信息卡片（取消时间、取消原因） |
|
||||
| 已完成 | appointment-detail-done.html | 绿色 | 驻场人员(姓名)已完成挂号 | 联系驻场人员 | 挂号结果卡片 |
|
||||
| 已取消 | appointment-detail-cancelled.html | 灰色 | 员工取消 / 管理人员取消 | 无 | 顶部状态区直接展示取消时间和取消原因 |
|
||||
|
||||
**业务规则：**
|
||||
- 待确认和已确认状态支持员工主动取消预约
|
||||
- 取消预约需二次确认（弹窗确认）
|
||||
- 已完成状态额外展示挂号结果信息
|
||||
- 已取消状态展示取消来源（个人取消/管理人员取消）及取消原因
|
||||
- 取消预约时弹出确认弹窗，弹窗内包含取消原因输入框（必填），未填写时确认按钮置灰不可点击
|
||||
- 已完成状态额外展示挂号结果信息（就诊科室、就诊医生、就诊时段、排队序号、就诊医院、挂号类别、备注）
|
||||
- 已取消状态在顶部状态区直接展示取消时间和取消原因（不再使用独立的取消信息卡片），展示取消来源（员工取消/管理人员取消）
|
||||
|
||||
**交互说明：**
|
||||
- 点击"取消预约"按钮，弹出确认弹窗，确认后取消预约并返回列表
|
||||
- 点击"取消预约"按钮，弹出确认弹窗，填写取消原因后确认取消预约并返回列表
|
||||
- 点击"联系驻场人员"按钮，调起系统拨号联系驻场人员
|
||||
- 点击弹窗中的"再想想"，关闭弹窗
|
||||
- 点击弹窗中的"确认取消"，取消预约并跳转回预约列表
|
||||
- 点击弹窗中的"确认取消"（需先填写取消原因），取消预约并跳转回预约列表
|
||||
- 点击返回箭头，返回预约列表页面
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 58 KiB |
@@ -193,7 +193,7 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
综合搜索的结果展示页面。顶部保留搜索栏（显示当前搜索关键词，支持修改后重新搜索）。搜索结果按专家、医院、科室、疾病四个分类混合展示，每个分类默认展示前几条，专家和医院分类带"查看全部"入口。无匹配结果时展示空状态提示。
|
||||
综合搜索的结果展示页面。顶部保留搜索栏（显示当前搜索关键词，支持修改后重新搜索）。搜索结果按专家、医院、科室、疾病四个分类混合展示，专家和医院分类带"查看全部"入口。无匹配结果时展示空状态提示。
|
||||
|
||||
**业务规则**
|
||||
|
||||
@@ -210,7 +210,7 @@ stateDiagram-v2
|
||||
- 点击科室/疾病标签跳转到专家列表页
|
||||
- 点击专家/医院分类的"查看全部"跳转到对应的完整列表
|
||||
- 点击"取消"返回综合搜索页
|
||||
- 导航栏返回 → 综合搜索页
|
||||
- 导航栏返回 → 综合搜索页
|
||||
|
||||
---
|
||||
### 2.5 专家列表（expert-list.html）
|
||||
|
||||
+80
-15
@@ -68,7 +68,7 @@ body { background: var(--background); font-family: -apple-system, BlinkMacSystem
|
||||
.role-icon--expert { background: linear-gradient(135deg, #1677FF, #4facfe); }
|
||||
.role-icon--assistant { background: linear-gradient(135deg, #722ED1, #b37feb); }
|
||||
.role-icon--operator { background: linear-gradient(135deg, #fa541c, #ff7a45); }
|
||||
.role-icon--worker { background: linear-gradient(135deg, #52c41a, #95de64); }
|
||||
.role-icon--professional { background: linear-gradient(135deg, #52c41a, #95de64); }
|
||||
.role-icon--onsite { background: linear-gradient(135deg, #faad14, #ffc53d); }
|
||||
.role-icon--admin { background: linear-gradient(135deg, #eb2f96, #ff85c0); }
|
||||
.role-icon--shared { background: linear-gradient(135deg, #13c2c2, #5cdbd3); }
|
||||
@@ -160,7 +160,7 @@ const ICONS = {
|
||||
empty: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.2" stroke-dasharray="3 2"/><path d="M8 5.5v3M8 10v.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>',
|
||||
prd: '<svg class="tab-nav__icon" viewBox="0 0 18 18" fill="none"><path d="M4 1h7l4 4v12H4V1z" stroke="currentColor" stroke-width="1.5"/><path d="M11 1v4h4" stroke="currentColor" stroke-width="1.5"/><line x1="7" y1="9" x2="13" y2="9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="7" y1="12" x2="11" y2="12" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>',
|
||||
prdSmall: '<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 1h5l2.5 2.5v7.5h-7.5V1z" stroke="currentColor" stroke-width="1"/><path d="M7.5 1v2.5h2.5" stroke="currentColor" stroke-width="1"/></svg>',
|
||||
role: { expert:'👨⚕', assistant:'🤖', operator:'📋', worker:'👷', onsite:'🏥', admin:'⚙', shared:'🔗' }
|
||||
role: { expert:'👨⚕', assistant:'🤖', operator:'📋', professional:'👷', onsite:'🏥', admin:'⚙', shared:'🔗' }
|
||||
};
|
||||
|
||||
const SITE_MAP = [
|
||||
@@ -240,9 +240,12 @@ const SITE_MAP = [
|
||||
{ file:'archive-personal-detail.html', label:'个人应急数据详情' },
|
||||
{ file:'archive-personal-detail-illness.html', label:'个人大病就医详情' },
|
||||
{ file:'archive-unit.html', label:'单位报表数据' },
|
||||
{ file:'archive-unit-detail.html', label:'单位报表详情' },
|
||||
{ file:'archive-unit-detail-illness.html', label:'单位大病就医详情' },
|
||||
{ file:'archive-center.html', label:'应急中心报表数据' },
|
||||
{ file:'resource-hospital.html', label:'医院信息' },
|
||||
{ file:'resource-medical-point.html', label:'医疗点信息' },
|
||||
{ file:'resource-medical-point-detail.html', label:'医疗点详情' },
|
||||
{ file:'resource-aed.html', label:'AED设备信息-设备管理' },
|
||||
{ file:'resource-aed-add.html', label:'AED设备信息-新增AED设备' },
|
||||
{ file:'resource-aed-deploy.html', label:'AED设备信息-布点管理' },
|
||||
@@ -253,17 +256,27 @@ const SITE_MAP = [
|
||||
{ file:'resource-aed-maintenance.html', label:'AED设备信息-维护记录' },
|
||||
{ file:'resource-aed-maintenance-add.html', label:'AED设备信息-新增维护记录' },
|
||||
{ file:'resource-aed-training.html', label:'AED设备信息-培演记录' },
|
||||
{ file:'resource-aed-training-add.html', label:'AED设备信息-新增培演记录' },
|
||||
{ file:'resource-aed-usage.html', label:'AED设备信息-应用记录' },
|
||||
{ file:'resource-aed-usage-add.html', label:'AED设备信息-新增应用记录' },
|
||||
{ file:'resource-ambulance.html', label:'救护车信息' },
|
||||
{ file:'resource-ambulance-detail.html', label:'救护车详情' },
|
||||
{ file:'resource-first-aid-kit.html', label:'急救包信息' },
|
||||
{ file:'resource-first-aid-kit-add.html', label:'新增急救包' },
|
||||
{ file:'resource-doctor.html', label:'急救医生信息' },
|
||||
{ file:'resource-doctor-add.html', label:'新增急救医生' },
|
||||
{ file:'resource-emergency-contact.html', label:'紧急联系人信息' },
|
||||
{ file:'center-basic-info.html', label:'应急中心基本信息' },
|
||||
{ file:'center-basic-info-add.html', label:'新增应急中心' },
|
||||
{ file:'center-basic-info-detail.html', label:'应急中心详情' },
|
||||
{ file:'center-work-order.html', label:'应急工单' },
|
||||
{ file:'center-seat.html', label:'坐席管理' },
|
||||
{ file:'center-work-order-add.html', label:'新增应急工单' },
|
||||
{ file:'center-work-order-detail.html', label:'应急工单详情' },
|
||||
{ file:'center-group.html', label:'分组管理' },
|
||||
{ file:'center-call-record.html', label:'通话记录' },
|
||||
{ file:'center-serious-illness.html', label:'大病就医' },
|
||||
{ file:'center-serious-illness-add.html', label:'新增大病就医' },
|
||||
{ file:'center-serious-illness-detail.html', label:'大病就医详情' },
|
||||
{ file:'center-data-screen.html', label:'大屏数据配置' },
|
||||
{ file:'center-schedule.html', label:'排班配置' },
|
||||
{ file:'center-simulation.html', label:'模拟急救联动' },
|
||||
@@ -274,8 +287,8 @@ const SITE_MAP = [
|
||||
{ file:'emergency-active.html', label:'正在应急' },
|
||||
{ file:'work-order.html', label:'应急工单' },
|
||||
{ file:'call-record.html', label:'通话记录' },
|
||||
{ file:'serious-illness.html', label:'大病就医' },
|
||||
{ file:'duty-group.html', label:'值班小组' }
|
||||
{ file:'duty-group.html', label:'值班小组' },
|
||||
{ file:'serious-illness.html', label:'大病就医' }
|
||||
]},
|
||||
{ name:'应急就医(专业人员)', dir:'web-admin/emergency-dispatch/professional', entry:'professional.html', pages:[
|
||||
{ file:'professional.html', label:'正在应急' }
|
||||
@@ -331,6 +344,7 @@ const SITE_MAP = [
|
||||
{ file:'emergency-tips.html', label:'急救提示书' },
|
||||
{ file:'help-records.html', label:'应急求助记录' },
|
||||
{ file:'appointment-list.html', label:'大病就医预约' },
|
||||
{ file:'appointment-list-confirmed.html', label:'预约-已确认' },
|
||||
{ file:'appointment-list-done.html', label:'预约-已完成' },
|
||||
{ file:'appointment-list-cancelled.html', label:'预约-已取消' },
|
||||
{ file:'appointment-detail-pending.html', label:'就医详情-待确认' },
|
||||
@@ -386,19 +400,70 @@ const SITE_MAP = [
|
||||
] }
|
||||
]},
|
||||
{ role:'应急操作人员', id:'operator', modules:[
|
||||
{name:'工作台',dir:'emergency-app/operator/workbench',pages:[]},
|
||||
{name:'知识库',dir:'emergency-app/operator/knowledge',pages:[]},
|
||||
{name:'我的',dir:'emergency-app/operator/profile',pages:[]}
|
||||
{name:'工作台',dir:'emergency-app/operator/workbench',pages:[
|
||||
{file:'index.html',label:'工作台首页(应急求助)'},
|
||||
{file:'serious-illness-list.html',label:'大病就医首页'},
|
||||
{file:'emergency-chat.html',label:'应急聊天'},
|
||||
{file:'emergency-chat-done.html',label:'应急聊天(已结束)'},
|
||||
{file:'patient-location.html',label:'患者定位'},
|
||||
{file:'dispatch-onsite.html',label:'派单驻场人员'},
|
||||
{file:'dispatch-ambulance.html',label:'派单救护车'},
|
||||
{file:'work-order-detail.html',label:'工单详情(已完成)'},
|
||||
{file:'work-order-detail-ongoing.html',label:'工单详情(进行中)'},
|
||||
{file:'rescue-summary.html',label:'救助信息'},
|
||||
{file:'end-emergency.html',label:'结束应急'},
|
||||
{file:'serious-illness-detail-pending.html',label:'大病就医详情(待确认)'},
|
||||
{file:'serious-illness-detail-confirmed.html',label:'大病就医详情(已确认)'},
|
||||
{file:'serious-illness-detail-done.html',label:'大病就医详情(已完成)'},
|
||||
{file:'serious-illness-detail-cancelled.html',label:'大病就医详情(已取消)'}
|
||||
]},
|
||||
{name:'知识库',dir:'emergency-app/operator/knowledge',pages:[
|
||||
{file:'index.html',label:'知识库首页'},{file:'article-detail.html',label:'知识详情'}
|
||||
]},
|
||||
{name:'我的',dir:'emergency-app/operator/profile',pages:[
|
||||
{file:'index.html',label:'我的主页'},
|
||||
{file:'duty-schedule.html',label:'值班信息'},
|
||||
{file:'duty-config.html',label:'排班配置'},
|
||||
{file:'edit-profile.html',label:'修改个人信息'},
|
||||
{file:'change-pwd.html',label:'修改密码'}
|
||||
]}
|
||||
]},
|
||||
{ role:'应急工作人员', id:'worker', modules:[
|
||||
{name:'工作台',dir:'emergency-app/worker/workbench',pages:[]},
|
||||
{name:'知识库',dir:'emergency-app/worker/knowledge',pages:[]},
|
||||
{name:'我的',dir:'emergency-app/worker/profile',pages:[]}
|
||||
{ role:'应急专业人员', id:'professional', modules:[
|
||||
{ name:'工作台', dir:'emergency-app/professional/workbench', pages:[
|
||||
{file:'index.html',label:'工作台首页'},
|
||||
{file:'emergency-chat-ongoing.html',label:'应急聊天(进行中)'},
|
||||
{file:'emergency-chat-done.html',label:'应急聊天(已结束)'},
|
||||
{file:'rescue-opinion.html',label:'救助意见'},
|
||||
{file:'patient-location.html',label:'患者定位'},
|
||||
{file:'work-order-detail.html',label:'工单详情(已完成)'},
|
||||
{file:'work-order-detail-ongoing.html',label:'工单详情(进行中)'}
|
||||
]},
|
||||
{ name:'知识库', dir:'emergency-app/professional/knowledge', pages:[
|
||||
{file:'index.html',label:'知识库首页'},{file:'article-detail.html',label:'知识详情'}
|
||||
]},
|
||||
{ name:'我的', dir:'emergency-app/professional/profile', pages:[
|
||||
{file:'index.html',label:'个人中心'},
|
||||
{file:'duty-schedule.html',label:'值班信息'},
|
||||
{file:'edit-profile.html',label:'修改个人信息'},{file:'change-pwd.html',label:'修改密码'}
|
||||
]}
|
||||
]},
|
||||
{ role:'应急驻场人员', id:'onsite', modules:[
|
||||
{name:'工作台',dir:'emergency-app/onsite/workbench',pages:[]},
|
||||
{name:'知识库',dir:'emergency-app/onsite/knowledge',pages:[]},
|
||||
{name:'我的',dir:'emergency-app/onsite/profile',pages:[]}
|
||||
{name:'工作台',dir:'emergency-app/onsite/workbench',pages:[
|
||||
{file:'index.html',label:'工作台首页(应急求助)'},
|
||||
{file:'serious-illness-list.html',label:'大病就医首页'},
|
||||
{file:'work-order-detail-ongoing.html',label:'工单详情(待处理)'},
|
||||
{file:'work-order-detail.html',label:'工单详情(已完成)'},
|
||||
{file:'serious-illness-detail-pending.html',label:'大病就医详情(待处理)'},
|
||||
{file:'serious-illness-detail-done.html',label:'大病就医详情(已完成)'}
|
||||
]},
|
||||
{name:'知识库',dir:'emergency-app/onsite/knowledge',pages:[
|
||||
{file:'index.html',label:'知识库首页'},{file:'article-detail.html',label:'知识详情'}
|
||||
]},
|
||||
{name:'我的',dir:'emergency-app/onsite/profile',pages:[
|
||||
{file:'index.html',label:'个人中心'},
|
||||
{file:'duty-schedule.html',label:'值班信息'},
|
||||
{file:'edit-profile.html',label:'修改个人信息'},{file:'change-pwd.html',label:'修改密码'}
|
||||
]}
|
||||
]},
|
||||
{ role:'管理员', id:'admin', modules:[
|
||||
{name:'工作台',dir:'emergency-app/admin/workbench',pages:[]},
|
||||
|
||||
@@ -85,7 +85,7 @@ web-admin/
|
||||
|------|---------|------|
|
||||
| 咨询专家 | expert | 专业医师/健康管理师，接收咨询、回复问题 |
|
||||
| 应急操作人员 | operator | 负责应急事件的调度与操作执行 |
|
||||
| 应急工作人员 | worker | 参与应急响应的一线工作人员 |
|
||||
| 应急专业人员 | professional | 参与应急响应的专业技术人员 |
|
||||
| 应急驻场人员 | onsite | 驻扎在现场的应急保障人员 |
|
||||
| 咨询小助手 | assistant | 辅助答疑、常见问题推送、数据统计 |
|
||||
| 管理员 | admin | 应急APP端的管理与配置人员 |
|
||||
@@ -102,7 +102,7 @@ emergency-app/
|
||||
│ ├── workbench/
|
||||
│ ├── knowledge/
|
||||
│ └── profile/
|
||||
├── worker/ # 应急工作人员
|
||||
├── professional/ # 应急专业人员
|
||||
│ ├── workbench/
|
||||
│ ├── knowledge/
|
||||
│ └── profile/
|
||||
|
||||
Reference in New Issue
Block a user