feat: 营养边缘服务原型迭代 + 西安应急大屏 v2/v3 双版本

- 营养边缘服务:新增《缓存中转服务器产品需求说明书》及导航入口;重构数据下发详情页(抽屉式接收轨迹+终端应用明细弹窗);告警中心/下发管理/上报管理/服务器管理/服务器详情统一补齐分页与列调整
- 西安应急大屏:新增 v2 版本(路径规划+统计胶囊悬浮化+图层位置调整)与 v3 版本(顶部 KPI 条+24h 趋势折线+横向条形图+环形组合图等图表化重构),全部纯内联 SVG;同步更新 CHANGELOG

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fengpu
2026-06-25 19:41:16 +08:00
co-authored by Claude Opus 4.7
parent 65372009fe
commit 23205ddd1b
12 changed files with 7911 additions and 204 deletions
@@ -1,5 +1,65 @@
# 应急大屏 - 变更记录
## [2026-06-25] feat: 西安应急中心大屏 v3 - 图表化重构 + 顶部 KPI 条 + 双栏可视化升级
### 新增(v3 文件 `xian-center/index-v3.html`v1/v2 保持不变)
- **顶部 KPI 条**:标题栏下方新增 5 个全局指标卡片(在线监测设备 1,286 台 / 今日告警 109 次 / 待处理 7 件 / 已处理 102 件 / 平均响应时长 4.2 分钟),每张卡片含图标、数值、标签、右上角趋势箭头(↑↓)
- **穿戴告警 24h 趋势折线图**:纯内联 SVG 绘制,3 条折线(心率/压力/血氧异常)按 0-23 小时分布,含网格虚线与 X 轴时间标签、底部图例
- **应急重点人员 TOP5 横向条形图**:替代原列表,TOP1/TOP2/TOP3 用红/黄/蓝三色高亮,其余统一蓝色,右端白色竖线 + 阴影
- **图表 CSS 模块**`.kpi-bar` / `.alarm-combo` / `.trend-chart` / `.service-combo` / `.bar-rank` / `.ai-risk-rings` 等组件样式
### 变更
- **左栏重构**(4 个面板,重新分配高度 152+148+237+232):
- 「穿戴告警分布」升级为**柱状+玫瑰环形组合图**:左侧保留 6 类横向柱状图(标签精简为 2-3 字),右侧新增 6 段占比环形图(按数值占比分段,中央显示告警总数 109)
- 「告警 24h 趋势」面板(见上)
- 「穿戴告警事件」**保留**滚动列表 + 点击触发急救路线交互,高度调整为 flex:1 自适应
- 「心脑血管预警(AI)」**保留**列表 + 点击触发急救提示书交互;摘要数字升级为 3 个**迷你环形图**(高危 3 / 中危 5 / 低危 12,按占比绘制弧长)
- **右栏重构**(3 个面板,重新分配高度 158+467+156):
- 「应急服务数据」升级为**中央环形+类型列表组合图**:左侧环形图(中央累计受理 3,562 + 三类服务按 22.96%/65.31%/11.73% 占比分段),右侧 3 项明细列表(视频 45 / 电话 128 / 120 拨打 23,含占比百分比)
- 「应急求助事件」**保留**滚动列表 + 点击触发急救路线交互
- 「应急重点人员 TOP5」改用横向条形图(见上)
- **布局调整**`.main` 高度由 `calc(100vh - 64px)` 改为 `calc(100vh - 64px - 64px)`(为顶部 KPI 条让出 64px);`.side` 宽度由 320px 改为 340px
- **响应式**`@media(max-width:1440px)` 同步调整 `.side` 宽度为 280px、KPI 数字字号降为 16px
### 保留(不动)
- 中间地图整体(资源 Tab / 路径规划 / 急救路线 / 资源面板 / 急救提示书 / 图层切换 / 接听状态 / 资源统计胶囊)
- 3 类告警弹窗(穿戴告警 / 应急求助 / 心脑血管预警)及其触发按钮
- 3 类记录列表弹窗(穿戴告警 / 心脑血管预警 / 应急求助 记录)及「查看更多」「历史记录」入口
- 所有 v2 既有 JS 交互函数
### 技术约束
- 全部图表使用**纯内联 SVG** 绘制(stroke-dasharray 控制环形占比、polyline 绘制折线),不引入任何外部图表库
- 严格遵守墨刀导入兼容约束(无外部引用、内联 SVG、简洁 DOM)
## [2026-06-25] feat: 西安应急中心大屏 - 路径规划 + 统计胶囊悬浮化 + 图层位置调整
### 新增
- **路径规划功能**:地图上方 Tab 栏在 AED 之后追加「路径规划」Tab,点击后在 Tab 栏下方展开规划面板
- 起点下拉(12 个备选点:当前位置/3 医疗点/4 医院/2 救护车/2 AED
- 终点下拉(同上,默认选中采油三厂医疗点)
- 「路径规划」按钮:在地图上绘制带动画的青色虚线弧形路径,并标注起/终点圆点
- 「清除」按钮:清除已绘制路径
- 规划完成后右上角显示路线信息卡片(总距离、预计用时,按 viewBox 距离 Mock 换算)
- **独立 SVG 层** `.plan-route-svg`:与急救路线 `.route-svg` 完全解耦,互不影响
- **JS**`PLAN_POINTS` 坐标映射 + `toggleRoutePlan()` / `executeRoutePlan()` / `clearRoutePlan()``switchTab()` 末尾联动关闭规划面板并清除路径
### 变更
- **统计卡片悬浮化**`.res-stat-row``.center` 末尾移入 `.map-wrap` 内部,改为绝对定位悬浮胶囊
- 位置:地图底部居中、`bottom:24px`,与底部边缘留有间距,不再贴合
- 样式:玻璃质感胶囊容器(圆角 24px + 模糊背景 + 阴影 + 装饰角),内部三张小卡片(图标 28px + 数字 18px + 标签 10px),卡片间以竖线分隔
- **图层切换移位**`.map-layer` 由原来右下角(`bottom:12px;right:178px`)移至地图右上角(`top:12px;right:12px`),与顶部居中的 `.res-tabs` 不冲突
## [2026-06-25] refactor: 西安应急中心大屏 - 中间区域统计卡片改造
### 变更
- **移除**:中间地图区域顶部的 KPI 核心指标卡片行(穿戴设备总数/今日穿戴报警数/今日应急求助数/平均响应时长)及其对应 `.kpi-row/.kpi-card*` CSS
- **新增**:地图下方资源统计卡片行 `.res-stat-row`,默认隐藏,点击地图上方医疗点/救护车/AED Tab 时切换显示对应三组统计卡片
- 医疗点:医疗点总数(3)/ 覆盖人数(2,860)/ 医护人员(28)
- 救护车:急救型救护车(5)/ 转运型救护车(3)/ 出勤次数(128)
- AED:在线设备(18)/ 离线设备(2)/ 使用次数(36)
- **新增**`RES_STAT_CONFIG` 数据映射 + `updateResStatRow(type)` 函数,由 `switchTab()` 调用同步刷新卡片内容
- **样式**:复用深色玻璃质感卡片风格,含图标、数值、标签、装饰角;图标颜色按主题色(青/绿/橙/红)区分
## [2026-06-23] feat: 新增西安应急中心大屏原型
### 新增
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff