feat: 完善应急工单详情与重症详情页面交互，调度端工单流程优化
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user