yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 应急救援求助弹窗左侧抽屉改版（求助信息紧凑化、健康画像关键项置顶、体检/穿戴告警折叠简化）

Browse Source
This commit is contained in:
liuyunqin
2026-08-27 10:29:34 +08:00
parent f90f260769
commit 539a2ba232
1 changed files with 84 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
other-module/emergency-screen/xian-center/help-emergency.html
+84 -127
View File
@@ -71,25 +71,35 @@ body::before{content:'';position:fixed;inset:0;z-index:-1;
.drawer-section__title{font-size:12px;font-weight:600;color:var(--text-main);margin-bottom:8px;
padding-left:10px;border-left:3px solid var(--danger);letter-spacing:0.5px;}
/* Employee info grid */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;}
.info-item{display:flex;flex-direction:column;gap:1px;}
.info-item--full{grid-column:1/-1;}
.info-label{font-size:10px;color:var(--text-dim);letter-spacing:0.5px;}
.info-value{font-size:12px;color:var(--text-main);}
/* Event tag */
.info-tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:600;}
/* Drawer compact: name head / quick rows / chips */
.event-head{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.event-head__name{font-size:17px;font-weight:700;color:#fff;letter-spacing:1px;}
.event-head__sub{font-size:12px;color:var(--text-sub);}
.blood-tag{padding:2px 10px;border-radius:4px;font-size:12px;font-weight:700;
color:var(--cyan);background:rgba(0,229,255,0.12);border:1px solid rgba(0,229,255,0.45);
box-shadow:0 0 8px rgba(0,229,255,0.15);}
.event-head__flag{margin-left:auto;padding:2px 10px;border-radius:4px;font-size:12px;font-weight:700;
color:var(--danger);background:rgba(255,77,79,0.15);border:1px solid rgba(255,77,79,0.5);}
.event-tags{display:flex;gap:6px;margin-bottom:9px;}
.quick-list{display:flex;flex-direction:column;gap:4px;}
.quick-row{display:flex;font-size:11px;line-height:1.5;}
.quick-row__label{color:var(--text-dim);flex-shrink:0;width:44px;}
.quick-row__value{color:var(--text-main);}
.quick-row__value--cyan{color:var(--cyan);}
.chip-row{display:flex;flex-wrap:wrap;gap:5px;}
.health-chip{padding:3px 9px;border-radius:3px;font-size:11px;line-height:1.4;
background:rgba(255,255,255,0.05);color:var(--text-main);}
.health-chip--warn{background:rgba(250,173,20,0.12);color:var(--warning);}
.health-chip--danger{background:rgba(255,77,79,0.15);color:var(--danger);}
.info-tag--danger{background:rgba(255,77,79,0.15);color:var(--danger);}
.info-tag--video{background:rgba(0,229,255,0.1);color:var(--cyan);}
/* Portrait card sections */
.portrait-section{margin-bottom:10px;}
.portrait-section:last-child{margin-bottom:0;}
.portrait-section__title{font-size:10px;font-weight:600;color:var(--text-sub);margin-bottom:5px;
padding-left:8px;border-left:2px solid var(--text-dim);letter-spacing:0.5px;}
.portrait-pop-tag{display:inline-block;padding:2px 10px;border-radius:3px;font-size:10px;font-weight:600;
background:rgba(255,77,79,0.12);color:var(--danger);margin-bottom:6px;}
.portrait-row{font-size:11px;color:var(--text-sub);line-height:1.7;}
.portrait-row b{color:var(--text-main);font-weight:500;}
/* Critical allergy / drug row - red highlighted */
.portrait-alert{display:flex;align-items:flex-start;gap:6px;padding:6px 10px;border-radius:5px;
@@ -98,18 +108,6 @@ body::before{content:'';position:fixed;inset:0;z-index:-1;
.portrait-alert__text{flex:1;}
.portrait-alert__text b{color:var(--danger);}
/* Key-value row for basic info */
.portrait-kv{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;}
.portrait-kv__item{display:flex;gap:6px;font-size:10px;line-height:1.6;}
.portrait-kv__label{color:var(--text-dim);flex-shrink:0;}
.portrait-kv__value{color:var(--text-main);font-weight:500;}
/* Disease list with years */
.portrait-disease-list{display:flex;flex-direction:column;gap:2px;}
.portrait-disease-item{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-sub);line-height:1.6;}
.portrait-disease-item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--danger);flex-shrink:0;opacity:0.5;}
.portrait-disease-item b{color:var(--text-main);font-weight:500;}
/* Exam collapsible */
.m-exam{border:1px solid rgba(255,255,255,0.08);border-radius:5px;overflow:hidden;}
.m-exam__header{display:flex;align-items:center;gap:8px;padding:5px 10px;cursor:pointer;
@@ -133,12 +131,9 @@ body::before{content:'';position:fixed;inset:0;z-index:-1;
.wearable-alert-item__type{color:var(--danger);font-weight:500;}
/* Portrait habit tags */
.portrait-habits{display:flex;flex-wrap:wrap;gap:5px;}
.portrait-habit-tag{padding:3px 10px;border-radius:3px;font-size:10px;display:flex;align-items:center;gap:3px;}
.portrait-habit-tag--danger{background:rgba(255,77,79,0.1);color:var(--danger);}
.portrait-habit-tag--warn{background:rgba(250,173,20,0.1);color:var(--warning);}
.portrait-habit-tag--neutral{background:rgba(255,255,255,0.04);color:var(--text-dim);}
.portrait-habit-tag--good{background:rgba(82,196,26,0.1);color:var(--success);}
/* ========== Map Area ========== */
.map-wrap{position:absolute;inset:0;overflow:hidden;
@@ -309,111 +304,71 @@ body::before{content:'';position:fixed;inset:0;z-index:-1;
<!-- Left Drawer -->
<div class="drawer" id="drawer">
<div class="drawer-panel">
<!-- Section A: Employee Info -->
<!-- Section A: 求助概览（人员 + 事件） -->
<div class="drawer-section">
<div class="drawer-section__title">员工信息</div>
<div class="info-grid">
<div class="info-item"><span class="info-label">姓名</span><span class="info-value">周丽华</span></div>
<div class="info-item"><span class="info-label">性别</span><span class="info-value">女</span></div>
<div class="info-item"><span class="info-label">年龄</span><span class="info-value">33岁</span></div>
<div class="info-item"><span class="info-label">员工编号</span><span class="info-value">BH-2019-0521</span></div>
<div class="info-item"><span class="info-label">手机号码</span><span class="info-value">13991358267</span></div>
<div class="info-item"><span class="info-label">单位部门</span><span class="info-value">宝石花医院护理部</span></div>
<div class="info-item info-item--full"><span class="info-label">紧急联系人</span><span class="info-value" style="color:var(--cyan);">李建国（配偶） · 139 9120 3368</span></div>
<div class="drawer-section__title">求助信息</div>
<div class="event-head">
<span class="event-head__name">周丽华</span>
<span class="event-head__sub">女 · 33岁</span>
<span class="event-head__flag">大病人群</span>
</div>
<div class="event-tags">
<span class="info-tag info-tag--video">应急视频</span>
<span class="info-tag info-tag--danger">待处理</span>
</div>
<div class="quick-list">
<div class="quick-row"><span class="quick-row__label">单位</span><span class="quick-row__value">公司机关-信息部</span></div>
<div class="quick-row"><span class="quick-row__label">时间</span><span class="quick-row__value">06-23 14:48</span></div>
<div class="quick-row"><span class="quick-row__label">位置</span><span class="quick-row__value">护理部大楼 3层302室</span></div>
<div class="quick-row"><span class="quick-row__label">电话</span><span class="quick-row__value">139 9135 8267</span></div>
<div class="quick-row"><span class="quick-row__label">家属</span><span class="quick-row__value quick-row__value--cyan">李建国（配偶）139 9120 3368</span></div>
</div>
</div>
<!-- Section B: Event Info -->
<div class="drawer-section">
<div class="drawer-section__title">事件信息</div>
<div class="info-grid">
<div class="info-item">
<span class="info-label">求助类型</span>
<span class="info-value"><span class="info-tag info-tag--video">应急视频</span></span>
</div>
<div class="info-item">
<span class="info-label">求助状态</span>
<span class="info-value"><span class="info-tag info-tag--danger">待处理</span></span>
</div>
<div class="info-item info-item--full">
<span class="info-label">求助时间</span>
<span class="info-value">2026-06-23 14:48:35</span>
</div>
<div class="info-item info-item--full">
<span class="info-label">详细地址</span>
<span class="info-value">宝石花医院护理部大楼3层302室</span>
</div>
</div>
</div>
<!-- Section C: Person Portrait -->
<!-- Section B: 健康画像（急救关键项置顶） -->
<div class="drawer-section">
<div class="drawer-section__title">健康画像</div>
<!-- 1. 五类人群 -->
<div class="portrait-section">
<div class="portrait-section__title">五类人群</div>
<div class="portrait-pop-tag">大病人群（心脑血管病）</div>
<!-- 过敏史：急救最优先 -->
<div class="portrait-alert" style="margin-bottom:9px;">
<svg class="portrait-alert__icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1.5L15 14H1L8 1.5z"/><path d="M8 6v2.5M8 11.5h.01"/></svg>
<div class="portrait-alert__text"><b>青霉素</b> · 过敏性休克</div>
</div>
<!-- 2. 基本体征 -->
<div class="portrait-section">
<div class="portrait-section__title">基本体征</div>
<div class="portrait-kv">
<div class="portrait-kv__item"><span class="portrait-kv__label">血型</span><span class="portrait-kv__value">B 型 Rh(+)</span></div>
<div class="portrait-kv__item"><span class="portrait-kv__label">身高</span><span class="portrait-kv__value">162 cm</span></div>
<div class="portrait-kv__item"><span class="portrait-kv__label">体重</span><span class="portrait-kv__value">68 kg</span></div>
<div class="portrait-kv__item"><span class="portrait-kv__label">BMI</span><span class="portrait-kv__value" style="color:var(--warning);">25.9</span></div>
</div>
<!-- 血型 / 体征标签 -->
<div class="chip-row" style="margin-bottom:10px;">
<span class="blood-tag">AB型</span>
<span class="health-chip">162cm · 68kg</span>
<span class="health-chip health-chip--warn">BMI 25.9</span>
</div>
<!-- 3. ⚠️ 过敏史（急救最优先） -->
<div class="portrait-section">
<div class="portrait-section__title">⚠️ 过敏史</div>
<div class="portrait-alert">
<svg class="portrait-alert__icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1.5L15 14H1L8 1.5z"/><path d="M8 6v2.5M8 11.5h.01"/></svg>
<div class="portrait-alert__text">
<div>过敏史：<b>青霉素（过敏性休克）</b></div>
</div>
</div>
<!-- 既往史 -->
<div class="portrait-section__title">既往史</div>
<div class="chip-row" style="margin-bottom:10px;">
<span class="health-chip">冠心病</span>
<span class="health-chip">高血压</span>
<span class="health-chip">2型糖尿病</span>
</div>
<!-- 4. 既往史 & 手术史 -->
<div class="portrait-section">
<div class="portrait-section__title">既往史</div>
<div class="portrait-disease-list">
<div class="portrait-disease-item"><b>冠心病</b>（2021年确诊，支架植入术后）</div>
<div class="portrait-disease-item"><b>高血压</b>病史 5年，最高 180/110</div>
<div class="portrait-disease-item"><b>2型糖尿病</b> 2年</div>
<div class="portrait-disease-item"><b>手术史</b>：冠脉支架×2（2021.03）</div>
</div>
<!-- 生活习惯（仅保留风险项） -->
<div class="portrait-section__title">生活习惯</div>
<div class="chip-row" style="margin-bottom:10px;">
<span class="portrait-habit-tag portrait-habit-tag--danger">🚬 吸烟 10支/天</span>
<span class="portrait-habit-tag portrait-habit-tag--warn">🍺 偶尔饮酒</span>
<span class="portrait-habit-tag portrait-habit-tag--warn">🏃 运动不足</span>
<span class="portrait-habit-tag portrait-habit-tag--warn">😴 睡眠不足</span>
<span class="portrait-habit-tag portrait-habit-tag--warn">🧂 口味偏咸</span>
</div>
<!-- 5. 体检异常指标（可折叠） -->
<div class="portrait-section">
<div class="portrait-section__title">体检异常指标</div>
<div class="m-exam" id="portraitExam">
<div class="m-exam__header" onclick="togglePortraitExam()">
<span class="m-exam__title">共4项异常</span>
<span class="m-exam__count">4</span>
<svg class="m-exam__arrow" viewBox="0 0 12 12" fill="none"><path d="M4 2.5L8 6 4 9.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="m-exam__body">
<div class="m-exam__row"><span class="m-exam__name">血压</span><span class="m-exam__val">偏高 148/95 mmHg</span></div>
<div class="m-exam__row"><span class="m-exam__name">尿酸</span><span class="m-exam__val">偏高 520 μmol/L</span></div>
<div class="m-exam__row"><span class="m-exam__name">血脂</span><span class="m-exam__val">异常 总胆固醇 6.8 mmol/L</span></div>
<div class="m-exam__row"><span class="m-exam__name">血糖</span><span class="m-exam__val">偏高 7.2 mmol/L</span></div>
</div>
</div>
</div>
<!-- 6. 穿戴异常告警（可折叠） -->
<div class="portrait-section">
<div class="portrait-section__title">穿戴 · 近期异常告警</div>
<!-- 穿戴异常告警（可折叠，最近一次在标题直接可见） -->
<div style="margin-bottom:8px;">
<div class="m-exam" id="portraitWearable">
<div class="m-exam__header" onclick="togglePortraitWearable()">
<span class="m-exam__title">共3次告警</span>
<span class="m-exam__count">3</span>
<span class="m-exam__title">最近告警：<b style="color:var(--danger);font-weight:600;">摔倒</b> 06-23 14:32</span>
<span class="m-exam__count">共3次</span>
<svg class="m-exam__arrow" viewBox="0 0 12 12" fill="none"><path d="M4 2.5L8 6 4 9.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="m-exam__body">
@@ -435,18 +390,20 @@ body::before{content:'';position:fixed;inset:0;z-index:-1;
</div>
</div>
<!-- 7. 生活习惯 -->
<div class="portrait-section">
<div class="portrait-section__title">生活习惯</div>
<div class="portrait-habits">
<span class="portrait-habit-tag portrait-habit-tag--danger">🚬 吸烟 10支/天</span>
<span class="portrait-habit-tag portrait-habit-tag--warn">🍺 偶尔饮酒</span>
<span class="portrait-habit-tag portrait-habit-tag--warn">🏃 运动不足（<1次/周）</span>
<span class="portrait-habit-tag portrait-habit-tag--warn">😴 睡眠不足（<6h）</span>
<span class="portrait-habit-tag portrait-habit-tag--neutral">🍚 主食偏多</span>
<span class="portrait-habit-tag portrait-habit-tag--neutral">🥬 蔬菜摄入偏少</span>
<span class="portrait-habit-tag portrait-habit-tag--warn">🧂 口味偏咸</span>
<span class="portrait-habit-tag portrait-habit-tag--good">💧 饮水充足</span>
<!-- 体检异常指标（可折叠） -->
<div>
<div class="m-exam" id="portraitExam">
<div class="m-exam__header" onclick="togglePortraitExam()">
<span class="m-exam__title">体检异常 共4项</span>
<span class="m-exam__count">4</span>
<svg class="m-exam__arrow" viewBox="0 0 12 12" fill="none"><path d="M4 2.5L8 6 4 9.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="m-exam__body">
<div class="m-exam__row"><span class="m-exam__name">血压</span><span class="m-exam__val">偏高 148/95 mmHg</span></div>
<div class="m-exam__row"><span class="m-exam__name">尿酸</span><span class="m-exam__val">偏高 520 μmol/L</span></div>
<div class="m-exam__row"><span class="m-exam__name">血脂</span><span class="m-exam__val">总胆固醇 6.8 mmol/L</span></div>
<div class="m-exam__row"><span class="m-exam__name">血糖</span><span class="m-exam__val">偏高 7.2 mmol/L</span></div>
</div>
</div>
</div>
</div>