From aa93392610cb6cd0150b357482d466436ee0c307 Mon Sep 17 00:00:00 2001 From: liuyunqin Date: Wed, 24 Jun 2026 14:42:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A5=BF=E5=AE=89=E5=BA=94=E6=80=A5?= =?UTF-8?q?=E4=B8=AD=E5=BF=83=E5=A4=A7=E5=B1=8F=20-=20=E4=B8=9A=E5=8A=A1?= =?UTF-8?q?=E8=AE=B0=E5=BD=95=E5=BC=B9=E7=AA=97=20&=20=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E8=AE=B0=E5=BC=B9=E7=AA=97=20&=20=E9=97=AA=E7=83=81?= =?UTF-8?q?=E8=BE=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增穿戴告警记录弹窗（筛选+分页，28条模拟数据，10列） - 新增心脑血管预警记录弹窗（筛选+分页，28条模拟数据，11列） - 新增应急求助记录弹窗（筛选+分页，28条模拟数据，10列） - 三个告警弹窗边缘红色脉冲闪烁动画 - 地图资源标记点击弹窗（11个资源的信息卡片） - 普通Tab模式与急救路线模式点击分发 Co-Authored-By: Claude Opus 4.8 --- .../emergency-screen/doc/CHANGELOG.md | 16 + .../emergency-screen/xian-center/index.html | 1524 +++++++++++++++-- 2 files changed, 1437 insertions(+), 103 deletions(-) diff --git a/other-module/emergency-screen/doc/CHANGELOG.md b/other-module/emergency-screen/doc/CHANGELOG.md index bee14bc..816d9b2 100644 --- a/other-module/emergency-screen/doc/CHANGELOG.md +++ b/other-module/emergency-screen/doc/CHANGELOG.md @@ -11,3 +11,19 @@ - 多资源类型标记：油田医院、合作医院、地方医院、医疗点、救护车、AED - 视觉风格：深色科技风，背景粒子动画、面板呼吸光晕、扫描线动效 - `index.html` SITE_MAP 同步更新：西安应急中心大屏卡片新增页面条目 + +## [2026-06-24] feat: 西安应急中心大屏 - 业务弹窗 & 地图交互增强 + +### 新增 +- **穿戴告警记录弹窗**：点击"穿戴告警事件"面板的"查看更多"按钮打开，支持筛选（告警类型、日期范围、姓名、员工编号），分页列表展示 28 条模拟数据（10 列：姓名、员工编号、性别、年龄、单位、部门、告警类型、告警值、告警时间、详细地址） +- **心脑血管预警记录弹窗**：点击"心脑血管预警(AI)"面板的"查看更多"按钮打开，支持筛选（风险类型、风险等级、日期范围、姓名、员工编号），分页列表展示 28 条模拟数据（11 列含 AI 预测概率和异常指标） +- **应急求助记录弹窗**：点击"应急求助事件"面板的"查看更多"按钮打开，支持筛选（求助类型、处理状态、日期范围、姓名、员工编号），分页列表展示 28 条模拟数据（10 列含处理状态标签） + +### 增强 +- **三个告警弹窗红色闪烁边框**：右上角三个触发按钮（穿戴告警/应急求助/心脑血管预警）对应的弹窗边缘增加红色脉冲闪烁动画（1.2s 周期 ease-in-out） +- **地图资源标记弹窗**：普通 Tab 模式下点击任意地图标记点，在标记上方弹出资源信息卡片（名称、分类标签、详细地址），点击地图空白处消失；急救路线模式下保持原有路线选择逻辑 + +### 技术 +- 三个记录弹窗共享 `alarm-record-*` CSS 布局类，各自独立 ID 和 JS 函数 +- 新增 `RESOURCE_INFO` 数据映射覆盖全部 11 个地图标记点 +- `onMapMarkerClick()` 统一处理普通模式（弹窗）和急救路线模式（选路线）的分发逻辑 diff --git a/other-module/emergency-screen/xian-center/index.html b/other-module/emergency-screen/xian-center/index.html index c304e3d..3e14b04 100644 --- a/other-module/emergency-screen/xian-center/index.html +++ b/other-module/emergency-screen/xian-center/index.html @@ -380,7 +380,28 @@ animation:empRipple 1.5s ease-out infinite;} @keyframes empRipple{0%{transform:translate(-50%,-50%) scale(0.5);opacity:1;}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0;}} - /* ========== 急救路线：SVG路线图层 ========== */ + /* ========== 员工标记信息卡片 ========== */ + .emp-info-card{position:absolute;bottom:52px;left:50%;transform:translateX(-50%); + background:rgba(10,22,48,0.96);border:1px solid rgba(255,77,79,0.35);border-radius:8px; + padding:12px 14px;min-width:220px;z-index:11;pointer-events:none;display:none; + box-shadow:0 4px 20px rgba(255,77,79,0.15);} + .emp-marker--show .emp-info-card{display:block;animation:infoFadeIn .3s ease;} + @keyframes infoFadeIn{0%{opacity:0;transform:translateX(-50%) translateY(6px);}100%{opacity:1;transform:translateX(-50%) translateY(0);}} + /* 向下三角箭头 */ + .emp-info-card::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%); + width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent; + border-top:6px solid rgba(255,77,79,0.35);} + .emp-info-card__header{font-size:12px;font-weight:600;color:var(--danger);margin-bottom:8px; + display:flex;align-items:center;gap:6px;} + .emp-info-card__header::before{content:'';width:6px;height:6px;border-radius:50%; + background:var(--danger);animation:empRipple 1.5s ease-out infinite;} + .emp-info-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;} + .emp-info-card__item{display:flex;flex-direction:column;gap:1px;} + .emp-info-card__item--full{grid-column:1/-1;} + .emp-info-card__label{font-size:10px;color:var(--text-dim);} + .emp-info-card__value{font-size:12px;color:var(--text-main);} + +/* ========== 急救路线：SVG路线图层 ========== */ .route-svg{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;display:none;} .route-svg--show{display:block;} .route-svg line{animation:routeDash 0.8s linear infinite;} @@ -436,6 +457,107 @@ font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .guide-panel__body ol li b{color:var(--warning);} + /* ========== 穿戴告警记录弹窗 ========== */ + .alarm-record-overlay{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,0.35); + display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);} + .alarm-record-modal{position:relative;width:1020px;max-height:85vh; + background:linear-gradient(135deg,rgba(10,25,55,0.98),rgba(15,40,75,0.98)); + border:1px solid var(--panel-border);border-radius:12px; + box-shadow:0 0 50px rgba(24,144,255,0.18);display:flex;flex-direction:column;overflow:hidden;} + .alarm-record-modal::before{content:'';position:absolute;top:0;left:0;width:14px;height:14px; + border-top:1.5px solid rgba(24,144,255,0.4);border-left:1.5px solid rgba(24,144,255,0.4);border-radius:12px 0 0 0;z-index:2;pointer-events:none;} + .alarm-record-modal::after{content:'';position:absolute;bottom:0;right:0;width:14px;height:14px; + border-bottom:1.5px solid rgba(24,144,255,0.4);border-right:1.5px solid rgba(24,144,255,0.4);border-radius:0 0 12px 0;z-index:2;pointer-events:none;} + .alarm-record-modal__header{height:48px;padding:0 18px;display:flex;align-items:center;gap:10px;flex-shrink:0; + background:linear-gradient(90deg,rgba(24,144,255,0.12),transparent);border-bottom:1px solid var(--panel-border);} + .alarm-record-modal__header-icon{width:28px;height:28px;border-radius:6px;background:rgba(255,77,79,0.15); + display:flex;align-items:center;justify-content:center;color:var(--danger);flex-shrink:0;} + .alarm-record-modal__title{font-size:15px;font-weight:600;color:var(--text-main);} + .alarm-record-modal__total{font-size:12px;color:var(--primary);margin-left:8px;} + .alarm-record-modal__close{font-size:20px;color:var(--text-dim);cursor:pointer;margin-left:auto;line-height:1;transition:all .2s;} + .alarm-record-modal__close:hover{color:var(--text-main);} + /* 筛选区域 */ + .alarm-record-filters{display:flex;align-items:flex-end;gap:10px;padding:12px 18px;flex-shrink:0; + border-bottom:1px solid rgba(24,144,255,0.08);flex-wrap:wrap;} + .alarm-record-filter{display:flex;flex-direction:column;gap:3px;} + .alarm-record-filter__label{font-size:10px;color:var(--text-dim);letter-spacing:0.5px;} + .alarm-record-filter__input,.alarm-record-filter__select{height:30px;padding:0 10px; + background:rgba(10,20,44,0.8);border:1px solid var(--panel-border);border-radius:6px; + font-size:12px;color:var(--text-main);outline:none;transition:border-color .2s;min-width:0;} + .alarm-record-filter__select{padding-right:28px;cursor:pointer;appearance:none; + background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A6B8A'/%3E%3C/svg%3E"); + background-repeat:no-repeat;background-position:right 10px center;} + .alarm-record-filter__input:focus,.alarm-record-filter__select:focus{border-color:var(--primary);} + .alarm-record-filter__input::placeholder{color:var(--text-dim);} + .alarm-record-filter__input--date{width:130px;} + .alarm-record-filter__input--text{width:110px;} + .alarm-record-filter__select--type{width:120px;} + .alarm-record-filter__btn{height:30px;padding:0 16px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s; + border:1px solid var(--panel-border);background:rgba(24,144,255,0.08);color:var(--text-sub);white-space:nowrap;} + .alarm-record-filter__btn:hover{background:rgba(24,144,255,0.15);color:var(--text-main);border-color:rgba(24,144,255,0.3);} + .alarm-record-filter__btn--primary{background:var(--primary);color:#fff;border-color:var(--primary);} + .alarm-record-filter__btn--primary:hover{background:#40a9ff;} + /* 表格区域 */ + .alarm-record-table-wrap{flex:1;overflow:auto;padding:0;} + .alarm-record-table-wrap::-webkit-scrollbar{width:4px;height:4px;} + .alarm-record-table-wrap::-webkit-scrollbar-thumb{background:rgba(24,144,255,0.3);border-radius:2px;} + .alarm-record-table{width:100%;border-collapse:collapse;font-size:12px;} + .alarm-record-table thead{position:sticky;top:0;z-index:3;} + .alarm-record-table th{background:rgba(10,22,48,0.98);color:var(--text-sub);font-weight:500;font-size:11px; + padding:10px 8px;text-align:left;border-bottom:1px solid rgba(24,144,255,0.2);white-space:nowrap; + letter-spacing:0.3px;} + .alarm-record-table td{padding:9px 8px;border-bottom:1px solid rgba(24,144,255,0.06); + color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} + .alarm-record-table tbody tr{transition:background .15s;} + .alarm-record-table tbody tr:hover{background:rgba(24,144,255,0.05);} + .alarm-record-table tbody tr:nth-child(even){background:rgba(24,144,255,0.02);} + .alarm-record-table tbody tr:nth-child(even):hover{background:rgba(24,144,255,0.06);} + .alarm-record-table__empty{padding:40px 0;text-align:center;color:var(--text-dim);font-size:13px;} + /* 分页 */ + .alarm-record-pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 18px; + border-top:1px solid rgba(24,144,255,0.12);flex-shrink:0;background:rgba(10,22,48,0.5);} + .alarm-record-pagination__info{font-size:11px;color:var(--text-dim);} + .alarm-record-pagination__pages{display:flex;align-items:center;gap:4px;} + .alarm-record-pagination__btn{width:28px;height:28px;border-radius:6px;display:flex;align-items:center; + justify-content:center;cursor:pointer;font-size:12px;color:var(--text-sub);transition:all .2s; + border:1px solid var(--panel-border);background:rgba(24,144,255,0.05);} + .alarm-record-pagination__btn:hover{background:rgba(24,144,255,0.15);color:var(--text-main);border-color:rgba(24,144,255,0.35);} + .alarm-record-pagination__btn.active{background:var(--primary);color:#fff;border-color:var(--primary);} + .alarm-record-pagination__btn--arrow{font-size:14px;font-weight:700;} + .alarm-record-pagination__ellipsis{width:28px;text-align:center;color:var(--text-dim);font-size:12px;} + .alarm-record-pagination__size{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);} + .alarm-record-pagination__size select{height:26px;padding:0 24px 0 8px;font-size:11px; + background:rgba(10,20,44,0.8);border:1px solid var(--panel-border);border-radius:5px; + color:var(--text-main);outline:none;cursor:pointer;appearance:none; + background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A6B8A'/%3E%3C/svg%3E"); + background-repeat:no-repeat;background-position:right 6px center;} + + /* ========== 告警弹窗红色闪烁边框 ========== */ + @keyframes modalAlertPulse{ + 0%,100%{border-color:rgba(255,77,79,0.3);box-shadow:0 0 12px rgba(255,77,79,0.1);} + 50%{border-color:rgba(255,77,79,0.9);box-shadow:0 0 28px rgba(255,77,79,0.45);} + } + #alarmModal .modal,#helpModal .modal,#cvModal .modal{ + animation:modalAlertPulse 1.2s ease-in-out infinite; + } + + /* ========== 地图资源标记弹窗 ========== */ + .marker-popup{position:absolute;z-index:20;display:none; + background:rgba(10,22,48,0.97);border:1px solid var(--panel-border);border-radius:8px; + padding:10px 14px;min-width:180px;max-width:240px;pointer-events:none; + box-shadow:0 4px 20px rgba(0,0,0,0.5),0 0 12px rgba(24,144,255,0.15); + transform:translate(-50%,-100%);} + .marker-popup::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%); + width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent; + border-top:6px solid rgba(10,22,48,0.97);} + .marker-popup--show{display:block;animation:popupFadeIn .2s ease;} + @keyframes popupFadeIn{0%{opacity:0;transform:translate(-50%,calc(-100% - 6px));}100%{opacity:1;transform:translate(-50%,-100%);}} + .marker-popup__name{font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:4px;} + .marker-popup__cat{font-size:10px;color:var(--text-dim);margin-bottom:6px;} + .marker-popup__cat span{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle;} + .marker-popup__label{font-size:10px;color:var(--text-dim);margin-bottom:2px;letter-spacing:0.5px;} + .marker-popup__addr{font-size:11px;color:var(--text-sub);line-height:1.5;} + /* ========== 响应式/小屏幕 ========== */ @media(max-width:1440px){.side{width:260px;}.main{padding:0 8px 8px;gap:8px;}} @@ -524,8 +646,8 @@
穿戴告警事件 - - 查看详情 + + 查看更多
@@ -638,8 +760,8 @@
心脑血管预警(AI) - - 查看详情 + + 查看更多
@@ -835,60 +957,60 @@
兴隆路
-
+
兴隆医院
-
+
高陵医院
-
+
宝石花医院
-
+
庆阳医院
-
+
采油一厂医疗点
-
+
采油二厂医疗点
-
+
采油三厂医疗点
-
+
AED-001
-
+
AED-002
-
+
陕A·120-03
-
+
陕A·120-01
@@ -913,7 +1035,43 @@ -
张建国 当前位置
+
+
告警详情
+
+
+ 异常类型 + 摔倒 +
+
+ 异常值 + -- +
+
+ 告警时间 + 2026-06-23 14:32:15 +
+
+ 员工姓名 + 张建国 +
+
+ 单位部门 + 采油一厂生产区 +
+
+ 详细地址 + 采油一厂生产基地B区3号井组作业平台 +
+
+
+
+ + +
+
+
+
详细地址
+
@@ -992,10 +1150,10 @@
  • 立即停止活动，平躺减少能量和氧气消耗
  • 如有症状发生请立即拨打120
  • 请准备硝酸甘油准备服用
    • -
  • 距离350米处有AED可用，电话15698987876，路线
    • -
  • 距离580米处有急救包可用，电话12569869896，路线
    • -
  • 距离8.5公里处有救护车，电话13656956688，15分钟可赶来，路线
    • -
  • 距离8.5公里处有医疗点，电话15698963656，15分钟可赶来，路线
    • +
  • 距离350米处有AED可用，电话15698987876
    • +
  • 距离580米处有急救包可用，电话12569869896
    • +
  • 距离8.5公里处有救护车，电话13656956688，15分钟可赶来
    • +
  • 距离8.5公里处有医疗点，电话15698963656，15分钟可赶来
  • 距离18公里处有庆城县医院，救护车来回约45分钟，该医院内科李晓涛医生、王开来医生较为专长
  • 距离52公里处有庆阳市医院，救护车来回约75分钟，该医院心梗急救能力强，教授胡忠、副教授李悦、教授徐立专长心梗，徐立是油田专家库签约教授
  • 距离339公里有西京医院、唐都医院、交大一附院、交大二附院等，急救能力强，有油田签约教授，在征得医生意见后，可谨慎考虑前往
    • @@ -1047,8 +1205,8 @@
    应急求助事件 - - 查看详情 + + 查看更多
    @@ -1267,7 +1425,7 @@
    - +
    @@ -1338,7 +1496,7 @@
    - +
    @@ -1356,7 +1514,7 @@
    -
    AI预测员工心脑血管风险升高，请注意关注并及时干预！
    +
    AI智能预测员工心脑血管风险升高，请注意关注并及时干预！
    预警信息
    @@ -1370,7 +1528,7 @@ 高危
    - AI预测概率 + 预测概率 89%
    @@ -1413,13 +1571,273 @@
    - +
    + + + + + + + + +