feat: 完善应急工单详情与重症详情页面交互，调度端工单流程优化
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -1,11 +1,11 @@
|
||||
_Last synced: 2026-04-23 | Base commit: `41c200e`_
|
||||
_Last synced: 2026-04-27 | Base commit: `dca337f`_
|
||||
|
||||
# 记忆索引
|
||||
|
||||
| 文件 | 描述 | 类型 | 最后更新 |
|
||||
|------|------|------|----------|
|
||||
| project_overview.md | 项目技术栈、架构与模块结构 | project | 2026-04-21 |
|
||||
| project_progress.md | 各模块原型开发进度 | project | 2026-04-21 |
|
||||
| project_overview.md | 项目技术栈、架构与模块结构 | project | 2026-04-27 |
|
||||
| project_progress.md | 各模块原型开发进度 | project | 2026-04-27 |
|
||||
| decisions.md | 关键设计决策与架构约定 | project | 2026-04-21 |
|
||||
| feedback.md | 协作规范与用户纠正记录 | feedback | 2026-04-21 |
|
||||
| user_profile.md | 用户角色与偏好 | user | 2026-04-21 |
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|----|------|------|
|
||||
| Web 管理端 | `web-admin/` | 平台管理员使用，16 个模块 |
|
||||
| 员工端 APP | `employee-app/` | 油田员工使用，17 个模块 |
|
||||
| 健康应急 APP | `emergency-app/` | 专家/应急人员使用，6 个角色 + 共享模块 |
|
||||
| 健康应急 APP | `emergency-app/` | 专家/应急人员使用，6 个角色（expert/assistant/operator/professional/onsite + 共享模块 ai-assistant/message） |
|
||||
|
||||
## 关键文件
|
||||
- `index.html` — 全局导航页（SITE_MAP 数据驱动）
|
||||
|
||||
@@ -5,20 +5,27 @@
|
||||
### 健康应急 APP（emergency-app）
|
||||
- `assistant/` — 咨询小助手端（12 页）✅
|
||||
- `expert/` — 咨询专家端（16 页）✅
|
||||
- `message/` — 消息/即时通讯（3 页）✅
|
||||
- `ai-assistant/` — AI 助手（1 页）✅
|
||||
- `operator/` — 操作人员端（22 页：工作台15 + 知识库2 + 个人中心5）✅
|
||||
- `professional/` — 专业人员端（13 页：工作台7 + 知识库2 + 个人中心4）✅
|
||||
- `onsite/` — 驻场人员端（12 页：工作台6 + 知识库2 + 个人中心4）✅
|
||||
- `message/` — 消息/即时通讯（3 页，共享模块）✅
|
||||
- `ai-assistant/` — AI 助手（1 页，共享模块）✅
|
||||
|
||||
### 员工端 APP（employee-app）
|
||||
- `health-consult/` — 健康咨询（32 页）✅
|
||||
- `emergency-medical/` — 应急就医（24 页）✅
|
||||
- `emergency-medical/` — 应急就医（25 页）✅
|
||||
|
||||
### Web 管理端（web-admin）
|
||||
- `health-consult/` — 专家咨询管理（50+ 页）✅
|
||||
- `emergency-dispatch/` — 应急就医管理（50+ 页）✅
|
||||
- `emergency-dispatch/` — 应急就医管理（含 admin + operator 子模块，70+ 页）✅
|
||||
|
||||
## 待开发模块
|
||||
Web 管理端和员工端 APP 的其余模块（系统管理、健康体检、体重管理、营养管理、运动管理、健康监测、健康评估、知识普及、健康数据、健康档案、心脑血管/糖尿病/癌症预防等）均为待开发状态。
|
||||
|
||||
## 总计
|
||||
- 已完成：200+ 个 HTML 原型页面
|
||||
- 覆盖模块：8 个（含三端）
|
||||
- 已完成：243 个 HTML 原型页面（经 SITE_MAP 双向验证）
|
||||
- 覆盖模块：11 个（含三端）
|
||||
|
||||
## 近期里程碑
|
||||
- 2026-04-27：完成驻场人员端全部页面，共享页面（AI助手/消息）修复角色导航，SITE_MAP 全量校验通过（243页）
|
||||
- 2026-04-23：完成操作人员端、专业人员端页面
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!-- Last updated: 2026-04-23 | Commit: 41c200e -->
|
||||
<!-- Last updated: 2026-04-27 | Commit: dca337f -->
|
||||
|
||||
# 项目约束
|
||||
|
||||
|
||||
@@ -1,168 +0,0 @@
|
||||
<!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>
|
||||
@@ -46,7 +46,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</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;">
|
||||
|
||||
@@ -89,7 +89,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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 class="case-meta">派单时间：2026-04-27 14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,7 +102,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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 class="case-meta">派单时间：2026-04-27 10:20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,8 +120,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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 class="case-meta">派单时间：2026-04-25 08:15</div>
|
||||
<div class="case-meta">完成时间：2026-04-25 18:20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,8 +134,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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 class="case-meta">派单时间：2026-04-24 09:10</div>
|
||||
<div class="case-meta">完成时间：2026-04-24 15:05</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,6 +77,18 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="dispatch-card">
|
||||
<div class="info-card__header" onclick="toggleCard('dispatch-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">2026-04-24 14:30</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>
|
||||
|
||||
@@ -44,7 +44,50 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.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-center.modal-bottom { align-items: flex-end; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.transfer-modal { width: calc(100% - 24px); max-width: 366px; height: 88vh; max-height: 88vh; border-radius: 20px 20px 0 0; overflow: visible; padding-bottom: 6px; display: flex; flex-direction: column; }
|
||||
.person-select { position: relative; padding: 0 16px; }
|
||||
.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: #1677ff; }
|
||||
.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__tip { margin-top: 6px; font-size: 12px; color: #999; line-height: 1.5; }
|
||||
.person-select__dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 16px; right: 16px; 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-options { max-height: 420px; 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: #f0f7ff; }
|
||||
.person-option.selected { background: #e6f4ff; }
|
||||
.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--free { 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: 12px 16px 0; }
|
||||
.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; }
|
||||
.transfer-note { margin: 12px 16px 0; }
|
||||
.transfer-note__label { font-size: 13px; color: #333; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
|
||||
.transfer-note__label .required { color: #ff4d4f; }
|
||||
.transfer-note__textarea { width: 100%; min-height: 88px; border: 1px solid #e8e8e8; border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; resize: none; font-family: inherit; line-height: 1.6; color: #1a1a1a; background: #fff; }
|
||||
.transfer-note__textarea:focus { border-color: #1677ff; }
|
||||
.status-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.status-tag--free { background: #f6ffed; color: #52c41a; }
|
||||
.status-tag--busy { background: #fff7e6; color: #fa8c16; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -92,12 +135,32 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" id="dispatch-card">
|
||||
<div class="info-card__header" onclick="toggleCard('dispatch-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">2026-04-28 08:30</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="如：心血管内科" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label"><span class="req">*</span>就诊医生</div>
|
||||
<input class="form-input" type="text" placeholder="如：李建国" />
|
||||
</div>
|
||||
<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" />
|
||||
@@ -106,6 +169,15 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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"><span class="req">*</span>挂号类别</div>
|
||||
<select class="form-input" style="appearance:auto;">
|
||||
<option value="" disabled selected>请选择挂号类别</option>
|
||||
<option value="专家号">专家号</option>
|
||||
<option value="急诊号">急诊号</option>
|
||||
<option value="普通号">普通号</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="form-label">备注</div>
|
||||
<textarea class="form-textarea" placeholder="如有特殊情况请备注说明"></textarea>
|
||||
@@ -117,13 +189,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
<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--secondary" onclick="openModal('modal-transfer')">转单</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="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>
|
||||
@@ -141,6 +214,61 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-transfer" class="modal-center modal-bottom">
|
||||
<div class="modal-box transfer-modal">
|
||||
<div style="width:42px;height:5px;border-radius:999px;background:#d9d9d9;margin:10px auto 6px;"></div>
|
||||
<div style="padding:8px 16px 12px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;flex-shrink:0;">选择转单人员</div>
|
||||
<div style="flex:1;overflow-y:auto;padding-bottom:6px;">
|
||||
<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" onclick="selectPerson(this)" data-name="王磊" data-hospital="西京医院" data-phone="139-8801-2201" data-status="空闲" data-status-type="free">
|
||||
<div class="person-option__info"><div class="person-option__name">王磊</div><div class="person-option__meta">所在医院：西京医院<br>联系方式：139-8801-2201</div></div>
|
||||
<span class="person-option__status person-option__status--free">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="赵婷" data-hospital="唐都医院" data-phone="137-5502-3318" data-status="有派单" data-status-type="busy">
|
||||
<div class="person-option__info"><div class="person-option__name">赵婷</div><div class="person-option__meta">所在医院：唐都医院<br>联系方式：137-5502-3318</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="158-0901-7765" data-status="空闲" data-status-type="free">
|
||||
<div class="person-option__info"><div class="person-option__name">孙浩</div><div class="person-option__meta">所在医院：长庆油田职工医院<br>联系方式：158-0901-7765</div></div>
|
||||
<span class="person-option__status person-option__status--free">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="刘芳" data-hospital="庆阳市人民医院" data-phone="136-2209-4456" data-status="空闲" data-status-type="free">
|
||||
<div class="person-option__info"><div class="person-option__name">刘芳</div><div class="person-option__meta">所在医院：庆阳市人民医院<br>联系方式：136-2209-4456</div></div>
|
||||
<span class="person-option__status person-option__status--free">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="陈刚" data-hospital="西安交大一附院" data-phone="189-9103-5578" data-status="有派单" data-status-type="busy">
|
||||
<div class="person-option__info"><div class="person-option__name">陈刚</div><div class="person-option__meta">所在医院：西安交大一附院<br>联系方式：189-9103-5578</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 class="person-info" id="person-info" style="display:none;">
|
||||
<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">-</span></div>
|
||||
<div class="person-info__row"><span class="person-info__label">当前状态</span><span id="info-status" class="person-info__value">-</span></div>
|
||||
</div>
|
||||
<div class="transfer-note">
|
||||
<div class="transfer-note__label"><span class="required">*</span>转单说明</div>
|
||||
<textarea class="transfer-note__textarea" placeholder="请输入转单原因或补充说明，如：当前医院距离较远，转交附近驻场人员接单处理"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;margin-top:0;flex-shrink:0;background:#fff;">
|
||||
<button onclick="closeTransferModal()" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button id="btn-transfer-confirm" onclick="closeModal('modal-transfer');location.href='./serious-illness-list.html'" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#ccc;font-weight:600;" disabled>确认转单</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -151,8 +279,87 @@ function toggleCard(id, trigger) {
|
||||
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 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'); }
|
||||
function getSelectedPerson() {
|
||||
return document.querySelector('#person-dropdown .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-dropdown .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();
|
||||
document.getElementById('person-info').style.display = 'block';
|
||||
var btn = document.getElementById('btn-transfer-confirm');
|
||||
btn.disabled = false;
|
||||
btn.style.color = '#1677ff';
|
||||
}
|
||||
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') || 'free';
|
||||
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--free';
|
||||
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-dropdown .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 closeTransferModal() {
|
||||
closeModal('modal-transfer');
|
||||
restoreSelectedName();
|
||||
closePersonDropdown();
|
||||
}
|
||||
document.addEventListener('click', function(event) {
|
||||
var select = document.getElementById('person-select');
|
||||
if (select && !select.contains(event.target)) {
|
||||
restoreSelectedName();
|
||||
closePersonDropdown();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -46,7 +46,50 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.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-center.modal-bottom { align-items: flex-end; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.transfer-modal { width: calc(100% - 24px); max-width: 366px; height: 88vh; max-height: 88vh; border-radius: 20px 20px 0 0; overflow: visible; padding-bottom: 6px; display: flex; flex-direction: column; }
|
||||
.person-select { position: relative; padding: 0 16px; }
|
||||
.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: #1677ff; }
|
||||
.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__tip { margin-top: 6px; font-size: 12px; color: #999; line-height: 1.5; }
|
||||
.person-select__dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 16px; right: 16px; 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-options { max-height: 420px; 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: #f0f7ff; }
|
||||
.person-option.selected { background: #e6f4ff; }
|
||||
.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--free { 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: 12px 16px 0; }
|
||||
.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; }
|
||||
.transfer-note { margin: 12px 16px 0; }
|
||||
.transfer-note__label { font-size: 13px; color: #333; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
|
||||
.transfer-note__label .required { color: #ff4d4f; }
|
||||
.transfer-note__textarea { width: 100%; min-height: 88px; border: 1px solid #e8e8e8; border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; resize: none; font-family: inherit; line-height: 1.6; color: #1a1a1a; background: #fff; }
|
||||
.transfer-note__textarea:focus { border-color: #1677ff; }
|
||||
.status-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.status-tag--free { background: #f6ffed; color: #52c41a; }
|
||||
.status-tag--busy { background: #fff7e6; color: #fa8c16; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -73,6 +116,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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">15899556658</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>
|
||||
@@ -105,6 +150,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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">李明</span></div>
|
||||
<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>
|
||||
@@ -134,6 +180,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="bottom-action">
|
||||
<button class="btn-secondary" onclick="openModal('modal-contact')">联系操作人员</button>
|
||||
<button class="btn-secondary" onclick="openModal('modal-transfer')">转单</button>
|
||||
<button class="btn-primary" onclick="openModal('modal-complete')">完成处理</button>
|
||||
</div>
|
||||
|
||||
@@ -160,6 +207,62 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 转单弹窗 -->
|
||||
<div id="modal-transfer" class="modal-center modal-bottom">
|
||||
<div class="modal-box transfer-modal">
|
||||
<div style="width:42px;height:5px;border-radius:999px;background:#d9d9d9;margin:10px auto 6px;"></div>
|
||||
<div style="padding:8px 16px 12px;font-size:17px;font-weight:700;text-align:center;color:#1a1a1a;flex-shrink:0;">选择转单人员</div>
|
||||
<div style="flex:1;overflow-y:auto;padding-bottom:6px;">
|
||||
<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" onclick="selectPerson(this)" data-name="王磊" data-hospital="华池县人民医院" data-phone="139-8801-2201" data-status="空闲" data-status-type="free">
|
||||
<div class="person-option__info"><div class="person-option__name">王磊</div><div class="person-option__meta">所在医院：华池县人民医院<br>联系方式：139-8801-2201</div></div>
|
||||
<span class="person-option__status person-option__status--free">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="赵婷" data-hospital="庆阳市人民医院" data-phone="137-5502-3318" data-status="有派单" data-status-type="busy">
|
||||
<div class="person-option__info"><div class="person-option__name">赵婷</div><div class="person-option__meta">所在医院：庆阳市人民医院<br>联系方式：137-5502-3318</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="158-0901-7765" data-status="空闲" data-status-type="free">
|
||||
<div class="person-option__info"><div class="person-option__name">孙浩</div><div class="person-option__meta">所在医院：长庆油田职工医院<br>联系方式：158-0901-7765</div></div>
|
||||
<span class="person-option__status person-option__status--free">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="刘芳" data-hospital="西峰区中医院" data-phone="136-2209-4456" data-status="空闲" data-status-type="free">
|
||||
<div class="person-option__info"><div class="person-option__name">刘芳</div><div class="person-option__meta">所在医院：西峰区中医院<br>联系方式：136-2209-4456</div></div>
|
||||
<span class="person-option__status person-option__status--free">空闲</span>
|
||||
</div>
|
||||
<div class="person-option" onclick="selectPerson(this)" data-name="陈刚" data-hospital="西安交大一附院" data-phone="189-9103-5578" data-status="有派单" data-status-type="busy">
|
||||
<div class="person-option__info"><div class="person-option__name">陈刚</div><div class="person-option__meta">所在医院：西安交大一附院<br>联系方式：189-9103-5578</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 class="person-info" id="person-info" style="display:none;">
|
||||
<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">-</span></div>
|
||||
<div class="person-info__row"><span class="person-info__label">当前状态</span><span id="info-status" class="person-info__value">-</span></div>
|
||||
</div>
|
||||
<div class="transfer-note">
|
||||
<div class="transfer-note__label"><span class="required">*</span>转单说明</div>
|
||||
<textarea class="transfer-note__textarea" placeholder="请输入转单原因或补充说明，如：当前现场距离较远，转交附近驻场人员前往处理"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;border-top:1px solid #f0f0f0;margin-top:0;flex-shrink:0;background:#fff;">
|
||||
<button onclick="closeTransferModal()" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#666;border-right:1px solid #f0f0f0;">取消</button>
|
||||
<button id="btn-transfer-confirm" onclick="closeModal('modal-transfer');location.href='./index.html'" style="flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;color:#ccc;font-weight:600;" disabled>确认转单</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -170,8 +273,87 @@ function toggleCard(id) {
|
||||
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 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'); }
|
||||
function getSelectedPerson() {
|
||||
return document.querySelector('#person-dropdown .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-dropdown .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();
|
||||
document.getElementById('person-info').style.display = 'block';
|
||||
var btn = document.getElementById('btn-transfer-confirm');
|
||||
btn.disabled = false;
|
||||
btn.style.color = '#1677ff';
|
||||
}
|
||||
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') || 'free';
|
||||
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--free';
|
||||
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-dropdown .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 closeTransferModal() {
|
||||
closeModal('modal-transfer');
|
||||
restoreSelectedName();
|
||||
closePersonDropdown();
|
||||
}
|
||||
document.addEventListener('click', function(event) {
|
||||
var select = document.getElementById('person-select');
|
||||
if (select && !select.contains(event.target)) {
|
||||
restoreSelectedName();
|
||||
closePersonDropdown();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -62,6 +62,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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">15899556658</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>
|
||||
@@ -95,6 +96,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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">李明</span></div>
|
||||
<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>
|
||||
|
||||
@@ -91,8 +91,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</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>
|
||||
<!-- [交互] 点击跳转至: ./work-order-detail-ongoing.html?method=应急视频 -->
|
||||
<button onclick="location.href='../workbench/work-order-detail-ongoing.html?method=应急视频'" 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>
|
||||
|
||||
@@ -45,6 +45,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
.tag-purple { background: #f9f0ff; color: #722ed1; }
|
||||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -94,12 +95,13 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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">求助方式：<span class="tag tag-blue">应急视频</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-card" onclick="location.href='./work-order-detail-ongoing.html?method=应急电话'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">🚑</div>
|
||||
<div class="case-main">
|
||||
@@ -107,12 +109,13 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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">求助方式：<span class="tag tag-purple">应急电话</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-card" onclick="location.href='./work-order-detail-ongoing.html?method=拨打120'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">🚑</div>
|
||||
<div class="case-main">
|
||||
@@ -120,6 +123,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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">求助方式：<span class="tag tag-orange">拨打120</span></div>
|
||||
<div class="case-meta">求助时间：2026-04-24 08:15</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,7 +134,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<!-- 已完成 -->
|
||||
<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-card" onclick="location.href='./work-order-detail.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">✅</div>
|
||||
<div class="case-main">
|
||||
@@ -138,13 +142,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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">求助方式：<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-card" onclick="location.href='./emergency-chat.html'">
|
||||
<div class="case-head">
|
||||
<div class="case-avatar case-avatar-emergency">📄</div>
|
||||
<div class="case-main">
|
||||
@@ -152,6 +157,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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">求助方式：<span class="tag tag-blue">应急视频</span></div>
|
||||
<div class="case-meta">求助时间：2026-04-24 08:15</div>
|
||||
<div class="case-meta">结束时间：2026-04-22 11:05</div>
|
||||
</div>
|
||||
|
||||
@@ -42,6 +42,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.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-item__delete { position: absolute; top: -1px; right: -1px; width: 18px; height: 18px; border-radius: 50%; background: #ff4d4f; color: #fff; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
|
||||
.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; }
|
||||
@@ -102,6 +103,20 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.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; }
|
||||
/* 底部结束应急按钮 */
|
||||
.end-bar { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: none; }
|
||||
.end-btn { width: 100%; height: 44px; border: none; border-radius: 10px; background: #ff4d4f; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
/* 二次确认弹窗 */
|
||||
.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>
|
||||
@@ -112,8 +127,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./emergency-chat.html -->
|
||||
<button class="back-btn" onclick="location.href='./emergency-chat.html'">
|
||||
<!-- [交互] 点击返回: 根据来源动态决定 -->
|
||||
<button class="back-btn" id="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>
|
||||
@@ -127,12 +142,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</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 id="info-method" 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>
|
||||
@@ -161,8 +175,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
<div class="photo-item">现场照片 1<div class="photo-item__mask">点击替换</div><div class="photo-item__delete" onclick="deletePhoto(this, event)">×</div></div>
|
||||
<div class="photo-item">现场照片 2<div class="photo-item__mask">点击替换</div><div class="photo-item__delete" onclick="deletePhoto(this, event)">×</div></div>
|
||||
<button class="photo-add" onclick="addPhoto('photo-list-ongoing')" type="button"><span>＋</span><span>上传照片</span></button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -297,11 +311,59 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部结束应急按钮 -->
|
||||
<div id="end-bar" class="end-bar">
|
||||
<button class="end-btn" onclick="openEndConfirm()">结束应急</button>
|
||||
</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');
|
||||
|
||||
function toggleCard(cardId, headerEl) {
|
||||
var card = document.getElementById(cardId);
|
||||
card.classList.toggle('card--collapsed');
|
||||
var label = headerEl.querySelector('.card__toggle span');
|
||||
label.textContent = card.classList.contains('card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
|
||||
/* 读取 URL 参数，动态设置求助方式和返回按钮 */
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var method = urlParams.get('method');
|
||||
if (method) {
|
||||
document.getElementById('info-method').textContent = method;
|
||||
}
|
||||
if (method === '应急视频') {
|
||||
document.getElementById('back-btn').onclick = function() { location.href = './emergency-chat.html'; };
|
||||
}
|
||||
if (method === '应急电话' || method === '拨打120') {
|
||||
document.getElementById('end-bar').style.display = 'block';
|
||||
}
|
||||
|
||||
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';
|
||||
}
|
||||
|
||||
var summaryItems = [
|
||||
'接到求助后远程指导患者制动并冰敷左膝。',
|
||||
'已联系操作人员安排驻场人员前往现场协助转运。'
|
||||
@@ -319,10 +381,17 @@ function addPhoto(listId) {
|
||||
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>';
|
||||
item.innerHTML = '现场照片 ' + count + '<div class="photo-item__mask">点击替换</div><div class="photo-item__delete" onclick="deletePhoto(this, event)">×</div>';
|
||||
list.insertBefore(item, addBtn);
|
||||
}
|
||||
|
||||
function deletePhoto(btn, event) {
|
||||
event.stopPropagation();
|
||||
if (!confirm('确定删除该照片吗？')) return;
|
||||
var item = btn.parentElement;
|
||||
item.parentElement.removeChild(item);
|
||||
}
|
||||
|
||||
function renderResult() {
|
||||
var el = document.getElementById('result-display');
|
||||
if (!resultText) {
|
||||
|
||||
@@ -42,6 +42,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.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-item__delete { position: absolute; top: -1px; right: -1px; width: 18px; height: 18px; border-radius: 50%; background: #ff4d4f; color: #fff; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
|
||||
.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; }
|
||||
@@ -124,8 +125,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</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">西安应急中心</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>
|
||||
@@ -159,9 +159,9 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<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>
|
||||
<div class="photo-item">现场照片 1<div class="photo-item__mask">点击替换</div><div class="photo-item__delete" onclick="deletePhoto(this, event)">×</div></div>
|
||||
<div class="photo-item">现场照片 2<div class="photo-item__mask">点击替换</div><div class="photo-item__delete" onclick="deletePhoto(this, event)">×</div></div>
|
||||
<div class="photo-item">现场照片 3<div class="photo-item__mask">点击替换</div><div class="photo-item__delete" onclick="deletePhoto(this, event)">×</div></div>
|
||||
<button class="photo-add" onclick="addPhoto('photo-list-done')" type="button"><span>＋</span><span>上传照片</span></button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -309,6 +309,13 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<script>
|
||||
sessionStorage.setItem('appRole', 'operator');
|
||||
|
||||
function toggleCard(cardId, headerEl) {
|
||||
var card = document.getElementById(cardId);
|
||||
card.classList.toggle('card--collapsed');
|
||||
var label = headerEl.querySelector('.card__toggle span');
|
||||
label.textContent = card.classList.contains('card--collapsed') ? '展开' : '收起';
|
||||
}
|
||||
|
||||
var summaryItems = [
|
||||
'接到应急求助后立即抵达现场，员工突发头晕伴恶心呕吐。',
|
||||
'现场监测体征异常，初步处置无效，联系驻场人员陪同就医。',
|
||||
@@ -327,10 +334,17 @@ function addPhoto(listId) {
|
||||
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>';
|
||||
item.innerHTML = '现场照片 ' + count + '<div class="photo-item__mask">点击替换</div><div class="photo-item__delete" onclick="deletePhoto(this, event)">×</div>';
|
||||
list.insertBefore(item, addBtn);
|
||||
}
|
||||
|
||||
function deletePhoto(btn, event) {
|
||||
event.stopPropagation();
|
||||
if (!confirm('确定删除该照片吗？')) return;
|
||||
var item = btn.parentElement;
|
||||
item.parentElement.removeChild(item);
|
||||
}
|
||||
|
||||
function renderResult() {
|
||||
var el = document.getElementById('result-display');
|
||||
el.className = resultText ? 'result-filled' : 'result-empty';
|
||||
|
||||
@@ -301,7 +301,7 @@ stateDiagram-v2
|
||||
- 底部输入栏包含【+更多功能】、文字输入、语音输入以及发送按钮
|
||||
|
||||
**交互说明：**
|
||||
- 点击【结束应急】弹出二次确认框，支持用户输入备注信息
|
||||
- 点击【结束应急】弹出二次确认框
|
||||
- 长按”话筒图标”按钮，发送语音消息
|
||||
- 点击【+】可重新发起视频通话、发送照片、拍摄、发送位置
|
||||
- 点击返回箭头，退出通话页面
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">确认结束应急</div>
|
||||
<div class="modal-desc">请确定本次应急求助已完成后再执行该操作</div>
|
||||
<textarea placeholder="请输入备注信息（选填）"></textarea>
|
||||
<!-- <textarea placeholder="请输入备注信息（选填）"></textarea>-->
|
||||
<div class="modal-actions">
|
||||
<button class="modal-cancel" onclick="hideEndModal()">取消</button>
|
||||
<button class="modal-confirm" onclick="confirmEnd()">确认结束</button>
|
||||
|
||||
@@ -461,7 +461,6 @@ const SITE_MAP = [
|
||||
]},
|
||||
{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:'修改密码'}
|
||||
]}
|
||||
]},
|
||||
|
||||
@@ -213,14 +213,6 @@
|
||||
<option>骨科</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>显示状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部状态</option>
|
||||
<option>显示中</option>
|
||||
<option>已隐藏</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 71 KiB |
Reference in New Issue
Block a user