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

fix: 穿戴监测 - 告警记录页字段优化 & 事件监听菜单展开箭头修复

Browse Source 
- exception-event.html: 工号→员工编号，新增员工编号筛选，手机号脱敏去除
- 8个顶层页面: 修复运维中心下'事件监听'菜单无展开箭头，改为sidebar-subgroup结构
- 更新CHANGELOG

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyunqin
2026-06-24 17:01:40 +08:00
co-authored by Claude Opus 4.8
parent ebc6a8204d
commit 239fd01229
15 changed files with 296 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
other-module/emergency-screen/xian-center/index.html
+122 -30
View File
@@ -162,6 +162,14 @@
.panel__header-tab:hover{color:var(--text-main);}
.panel__header-tab.active{background:var(--primary);color:#fff;}
.panel__header-link{font-size:10px;color:var(--primary);cursor:pointer;margin-left:auto;flex-shrink:0;transition:all .2s;}
.panel__header-select{height:26px;padding:0 24px 0 10px;margin-left:auto;font-size:11px;
background:rgba(10,20,44,0.8);border:1px solid var(--panel-border);border-radius:13px;
color:var(--text-sub);outline:none;cursor:pointer;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%234A6B8A'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 8px center;transition:all .2s;}
.panel__header-select:hover{border-color:rgba(24,144,255,0.4);color:var(--text-main);}
.panel__header-select:focus{border-color:var(--primary);}
.panel__header-select option{background:#0f2847;color:var(--text-main);}
.panel__header-link:hover{color:#40a9ff;text-decoration:underline;}
.panel__body{flex:1;padding:12px;overflow-y:auto;}
.panel__body::-webkit-scrollbar{width:4px;}
@@ -558,6 +566,49 @@
.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;}
/* ========== 地图右下角：接听状态控制面板 ========== */
.map-ctrl{position:absolute;bottom:12px;right:12px;z-index:12;
background:rgba(10,22,48,0.88);border:1px solid var(--panel-border);border-radius:8px;
padding:12px 16px;display:flex;flex-direction:column;gap:12px;
backdrop-filter:blur(6px);min-width:150px;}
.map-ctrl::before{content:'';position:absolute;top:0;left:0;width:10px;height:10px;
border-top:1.5px solid rgba(24,144,255,0.35);border-left:1.5px solid rgba(24,144,255,0.35);border-radius:8px 0 0 0;pointer-events:none;}
.map-ctrl::after{content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;
border-bottom:1.5px solid rgba(24,144,255,0.35);border-right:1.5px solid rgba(24,144,255,0.35);border-radius:0 0 8px 0;pointer-events:none;}
.map-ctrl__row{display:flex;align-items:center;gap:10px;}
.map-ctrl__label{font-size:12px;color:var(--text-sub);white-space:nowrap;}
/* Switch 开关 */
.map-ctrl__switch{position:relative;width:40px;height:22px;flex-shrink:0;cursor:pointer;}
.map-ctrl__switch input{display:none;}
.map-ctrl__switch-track{position:absolute;inset:0;border-radius:11px;background:rgba(74,107,138,0.4);
border:1px solid rgba(74,107,138,0.5);transition:all .25s;}
.map-ctrl__switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:var(--text-sub);transition:all .25s;box-shadow:0 1px 3px rgba(0,0,0,0.3);}
.map-ctrl__switch input:checked + .map-ctrl__switch-track{background:rgba(82,196,26,0.25);border-color:rgba(82,196,26,0.5);}
.map-ctrl__switch input:checked ~ .map-ctrl__switch-thumb{left:20px;background:var(--success);
box-shadow:0 0 8px rgba(82,196,26,0.5);}
/* 视频通话按钮 */
.map-ctrl__btn{display:flex;align-items:center;gap:6px;height:32px;padding:0 14px;
border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s;white-space:nowrap;
background:rgba(24,144,255,0.12);color:var(--primary);border:1px solid rgba(24,144,255,0.3);}
.map-ctrl__btn:hover{background:rgba(24,144,255,0.22);border-color:rgba(24,144,255,0.5);
box-shadow:0 0 12px rgba(24,144,255,0.2);}
.map-ctrl__btn svg{width:16px;height:16px;flex-shrink:0;}
/* ========== 地图右下角：图层切换 ========== */
.map-layer{position:absolute;bottom:12px;right:178px;z-index:12;
background:rgba(10,22,48,0.88);border:1px solid var(--panel-border);border-radius:8px;
padding:8px 10px;display:flex;flex-direction:column;gap:2px;
backdrop-filter:blur(6px);}
.map-layer::before{content:'';position:absolute;top:0;left:0;width:10px;height:10px;
border-top:1.5px solid rgba(24,144,255,0.35);border-left:1.5px solid rgba(24,144,255,0.35);border-radius:8px 0 0 0;pointer-events:none;}
.map-layer::after{content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;
border-bottom:1.5px solid rgba(24,144,255,0.35);border-right:1.5px solid rgba(24,144,255,0.35);border-radius:0 0 8px 0;pointer-events:none;}
.map-layer__item{font-size:11px;color:var(--text-dim);padding:5px 10px;border-radius:4px;
cursor:pointer;transition:all .2s;white-space:nowrap;text-align:center;}
.map-layer__item:hover{color:var(--text-main);background:rgba(24,144,255,0.08);}
.map-layer__item.active{color:var(--primary);background:rgba(24,144,255,0.15);}
/* ========== 响应式/小屏幕 ========== */
@media(max-width:1440px){.side{width:260px;}.main{padding:0 8px 8px;gap:8px;}}
</style>
@@ -598,12 +649,13 @@
<div class="panel__header">
<div class="panel__header-diamond"></div>
<span class="panel__header-title">穿戴告警分布</span>
<!-- [交互] 时间段切换：近一周/近一月/近一年 -->
<div class="panel__header-tabs">
<span class="panel__header-tab active" onclick="switchPeriod(this,'week')">近一周</span>
<span class="panel__header-tab" onclick="switchPeriod(this,'month')">近一月</span>
<span class="panel__header-tab" onclick="switchPeriod(this,'year')">近一年</span>
</div>
<!-- [交互] 时间段切换：今日/近一周/近一月/近一年 -->
<select class="panel__header-select" onchange="switchPeriod(this.value)">
<option value="today" selected>今日</option>
<option value="week">近一周</option>
<option value="month">近一月</option>
<option value="year">近一年</option>
</select>
</div>
<div class="panel__body">
<div class="alarm-bars">
@@ -761,7 +813,7 @@
<div class="panel__header-diamond"></div>
<span class="panel__header-title">心脑血管预警(AI)</span>
<!-- [交互] 点击查看更多，打开心脑血管预警记录弹窗 -->
<span class="panel__header-link" onclick="openCvRecordModal();event.stopPropagation();">查看更多</span>
<span class="panel__header-link" onclick="openCvRecordModal();event.stopPropagation();">历史记录</span>
</div>
<div class="panel__body" style="padding:8px 12px;">
<!-- [内容] AI预警摘要 -->
@@ -1019,12 +1071,12 @@
<!-- 地图图例 -->
<div class="map-legend">
<div class="map-legend__item"><div class="map-legend__dot" style="background:#1890FF;"></div>油田医院</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#722ED1;"></div>合作医院</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#1890FF;border:1.5px dashed #1890FF;background:transparent;"></div>地方医院</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#13C2C2;"></div>医疗点</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#FAAD14;"></div>救护车</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#FF4D4F;"></div>AED</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#1890FF;"></div>油田医院(1)</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#722ED1;"></div>合作医院(1)</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#1890FF;border:1.5px dashed #1890FF;background:transparent;"></div>地方医院(2)</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#13C2C2;"></div>医疗点(3)</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#FAAD14;"></div>救护车(2)</div>
<div class="map-legend__item"><div class="map-legend__dot" style="background:#FF4D4F;"></div>AED(2)</div>
</div>
<!-- [急救路线] 员工当前位置标记 -->
@@ -1161,6 +1213,30 @@
</ol>
</div>
</div>
<!-- 地图右下角：图层切换 -->
<div class="map-layer">
<span class="map-layer__item active" onclick="switchMapLayer(this,'default')">默认地图</span>
<span class="map-layer__item" onclick="switchMapLayer(this,'satellite')">卫星地图</span>
<span class="map-layer__item" onclick="switchMapLayer(this,'standard')">标准地图</span>
</div>
<!-- 地图右下角：接听状态控制 -->
<div class="map-ctrl">
<div class="map-ctrl__row">
<span class="map-ctrl__label">++++++++++++++++++++++++++++++++++++++++++++</span>
<label class="map-ctrl__switch" title="切换接听状态">
<input type="checkbox" id="acceptSwitch" checked onchange="onAcceptSwitch(this.checked)">
<div class="map-ctrl__switch-track"></div>
<div class="map-ctrl__switch-thumb"></div>
</label>
</div>
<!-- [交互] 点击发起视频通话 -->
<button class="map-ctrl__btn" onclick="onVideoCall();event.stopPropagation();" title="视频通话">
<svg viewBox="0 0 16 16" fill="none"><path d="M1 4.5A1.5 1.5 0 012.5 3h7A1.5 1.5 0 0111 4.5v2.8l3.2-2.4a.5.5 0 01.8.4v5.4a.5.5 0 01-.8.4L11 8.7v2.8a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 011 11.5v-7z" fill="currentColor"/></svg>
视频通话
</button>
</div>
</div>
</div>
@@ -1171,12 +1247,13 @@
<div class="panel__header">
<div class="panel__header-diamond"></div>
<span class="panel__header-title">应急服务数据</span>
<!-- [交互] 时间段切换：近一周/近一月/近一年 -->
<div class="panel__header-tabs">
<span class="panel__header-tab active" onclick="switchPeriod(this,'week')">近一周</span>
<span class="panel__header-tab" onclick="switchPeriod(this,'month')">近一月</span>
<span class="panel__header-tab" onclick="switchPeriod(this,'year')">近一年</span>
</div>
<!-- [交互] 时间段切换：今日/近一周/近一月/近一年 -->
<select class="panel__header-select" onchange="switchPeriod(this.value)">
<option value="today" selected>今日</option>
<option value="week">近一周</option>
<option value="month">近一月</option>
<option value="year">近一年</option>
</select>
</div>
<div class="panel__body">
<div class="stat-grid">
@@ -1206,7 +1283,7 @@
<div class="panel__header-diamond"></div>
<span class="panel__header-title">应急求助事件</span>
<!-- [交互] 点击查看更多，打开应急求助记录弹窗 -->
<span class="panel__header-link" onclick="openHelpRecordModal();event.stopPropagation();">查看更多</span>
<span class="panel__header-link" onclick="openHelpRecordModal();event.stopPropagation();">历史记录</span>
</div>
<div class="panel__body" style="overflow:hidden;padding:0;">
<div class="alarm-list">
@@ -1322,11 +1399,12 @@
<div class="panel__header">
<div class="panel__header-diamond"></div>
<span class="panel__header-title">应急重点人员</span>
<div class="panel__header-tabs">
<span class="panel__header-tab active" onclick="switchPeriod(this,'week')">近一周</span>
<span class="panel__header-tab" onclick="switchPeriod(this,'month')">近一月</span>
<span class="panel__header-tab" onclick="switchPeriod(this,'year')">近一年</span>
</div>
<select class="panel__header-select" onchange="switchPeriod(this.value)">
<option value="today" selected>今日</option>
<option value="week">近一周</option>
<option value="month">近一月</option>
<option value="year">近一年</option>
</select>
</div>
<div class="panel__body">
<div class="help-person-list">
@@ -2400,11 +2478,8 @@ document.getElementById('helpTrack').addEventListener('click',function(e){
});
/* ========== 应急服务数据 时间段切换 ========== */
function switchPeriod(el,period){
var tabs=el.parentElement.querySelectorAll('.panel__header-tab');
tabs.forEach(function(t){t.classList.remove('active');});
el.classList.add('active');
/* [交互] 根据 period('week'/'month'/'year') 异步刷新下方4项指标数据 */
function switchPeriod(period){
/* [交互] 根据 period('today'/'week'/'month'/'year') 异步刷新下方6项指标数据 */
}
/* ========== Tab切换 - 地图资源筛选 ========== */
@@ -2991,6 +3066,23 @@ function resetHelpRecordFilter(){
renderHelpRecordTable();
}
/* ========== 地图右下角控制面板交互 ========== */
function onAcceptSwitch(checked){
/* [交互] 切换接听状态：checked=true 表示接收中，checked=false 表示暂停接收，文案和颜色不变 */
}
function switchMapLayer(el, layer){
/* [交互] 切换地图图层：default/satellite/standard */
var items = el.parentElement.querySelectorAll('.map-layer__item');
items.forEach(function(t){t.classList.remove('active');});
el.classList.add('active');
}
function onVideoCall(){
/* [交互] 点击视频通话按钮，弹出确认或直接发起视频通话 */
alert('正在发起视频通话…');
}
</script>
</body>
</html>