feat:站点入口指向应急大屏 v3 + v3 交互优化(路线面板关闭按钮、告警趋势、咨询卡片精简、急救提示书模式点击绘线)
This commit is contained in:
@@ -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="关闭">×</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);
|
||||
|
||||
Reference in New Issue
Block a user