feat:站点入口指向应急大屏 v3 + v3 交互优化(路线面板关闭按钮、告警趋势、咨询卡片精简、急救提示书模式点击绘线)

This commit is contained in:
liuyunqin
2026-06-29 18:51:17 +08:00
parent d525cf0eb3
commit 5002dc38ad
2 changed files with 41 additions and 14 deletions
@@ -774,7 +774,9 @@
border-top:1.5px solid rgba(24,144,255,0.35);border-left:1.5px solid rgba(24,144,255,0.35);border-radius:10px 0 0 0;}
.route-panel::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 10px 0;}
.route-panel__title{font-size:12px;font-weight:600;color:var(--cyan);text-align:center;margin-bottom:2px;}
.route-panel__title{position:relative;font-size:12px;font-weight:600;color:var(--cyan);text-align:center;margin-bottom:2px;}
.route-panel__close{position:absolute;right:-2px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--text-dim);cursor:pointer;line-height:1;transition:all .2s;}
.route-panel__close:hover{color:var(--text-main);}
.route-panel__item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(24,144,255,0.08);}
.route-panel__item:last-child{border-bottom:none;}
.route-panel__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
@@ -1552,7 +1554,7 @@
<!-- [急救路线] 右侧资源信息面板 -->
<div class="route-panel" id="routePanel">
<div class="route-panel__title">距离最近资源</div>
<div class="route-panel__title">距离最近资源<span class="route-panel__close" onclick="closeRoutePanel();event.stopPropagation();" title="关闭">&times;</span></div>
<!-- [交互] 点击某个资源后在地图上显示对应路线和标记 -->
<div class="route-panel__item route-panel__item--clickable" onclick="selectRoute('oilfield')" data-route="oilfield">
<div class="route-panel__dot" style="background:#1890FF;box-shadow:0 0 6px rgba(24,144,255,0.5);"></div>
@@ -1711,7 +1713,7 @@
<div class="top-stat-card top-stat-card--danger">
<div class="top-stat-card__body">
<div class="top-stat-card__num">35<unit></unit></div>
<div class="top-stat-card__label">今日告警次数</div>
<div class="top-stat-card__label">今日告警次数 <span class="top-stat-card__trend top-stat-card__trend--up">↑15%</span></div>
</div>
</div>
</div>
@@ -1748,23 +1750,14 @@
<div class="panel__body" style="overflow:hidden;">
<div class="consult-stats">
<div class="consult-stat-card consult-stat-card--primary">
<div class="consult-stat-card__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><path d="M20 8v6"/><path d="M23 11h-6"/></svg>
</div>
<div class="consult-stat-card__num">36</div>
<div class="consult-stat-card__label">入驻专家数</div>
</div>
<div class="consult-stat-card consult-stat-card--success">
<div class="consult-stat-card__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
</div>
<div class="consult-stat-card__num">1,286</div>
<div class="consult-stat-card__label">累计咨询次数</div>
</div>
<div class="consult-stat-card consult-stat-card--warning">
<div class="consult-stat-card__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
</div>
<div class="consult-stat-card__num">892</div>
<div class="consult-stat-card__label">累计咨询人数</div>
</div>
@@ -2815,6 +2808,32 @@ function closeGuidePanel(){
}
}
/* [交互] 关闭"距离最近资源"面板:清理逻辑与 closeGuidePanel 一致 */
function closeRoutePanel(){
hideResourcePopup();
document.getElementById('routePanel').classList.remove('route-panel--show');
document.getElementById('empMarker').classList.remove('emp-marker--show');
document.getElementById('routeSvg').classList.remove('route-svg--show');
/* 隐藏所有路线 */
Object.keys(ROUTE_MAP).forEach(function(k){
var line=document.getElementById(ROUTE_MAP[k].line);
if(line)line.setAttribute('opacity','0');
var m=document.getElementById(ROUTE_MAP[k].marker);
if(m)m.classList.remove('map-marker--route');
});
currentRouteType=null;
/* 恢复图例 */
var legend=document.querySelector('.map-legend');
if(legend)legend.style.display='';
/* 恢复全部资源标记 */
document.querySelectorAll('.map-marker').forEach(function(m){m.style.display='block';});
/* 恢复全部资源Tab */
var allTab=document.querySelector('.res-tab[onclick*="all"]');
if(allTab){
document.querySelectorAll('.res-tab').forEach(function(t){t.classList.remove('active','res-tab--route-active');});
allTab.classList.add('active');
}
}
/* ========== 急救路线 ========== */
/* 路线类型 → { 路线SVG line id, 地图标记 id } */
var ROUTE_MAP={
@@ -2845,13 +2864,21 @@ var RESOURCE_INFO={
function onMapMarkerClick(el, key){
var routePanel=document.getElementById('routePanel');
var guidePanel=document.getElementById('guidePanel');
var inRouteMode=routePanel&&routePanel.classList.contains('route-panel--show');
var inGuideMode=guidePanel&&guidePanel.classList.contains('guide-panel--show');
/* 急救路线模式下:保留路线选择逻辑,并展示资源详情卡(含下发急救通知按钮) */
if(inRouteMode&&ROUTE_MAP[key]){
selectRoute(key);
showResourcePopup(el, key, true);
return;
}
/* 急救提示书模式下:点击资源标记绘制/切换路线,并展示资源详情卡(参考急救路线交互,不带下发按钮) */
if(inGuideMode&&ROUTE_MAP[key]){
selectRoute(key);
showResourcePopup(el, key, false);
return;
}
/* 普通模式:隐藏所有路线,显示资源弹窗(不带下发按钮) */
hideAllRoutes();
showResourcePopup(el, key, false);