shishengliang/vehicle-map-0803
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dc5f88cf16b54d281dbe7ea686769a6248b86065
vehicle-map-0803/index.html
T

194 lines
9.5 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>羚牛氢能 - 车辆网络 | Lingniu H2 Executive Cockpit</title>
<!-- Google Fonts: Inter & JetBrains Mono -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css?v=2026080322">
<!-- 高德地图 (AutoNavi AMap) Web JS API v2.0 Configuration -->
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '0b54a41143bec162788d01deba851340',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=1868920ac8ff6b6f88dbe9fa2609c183&plugin=AMap.Scale,AMap.ToolBar,AMap.Marker"></script>
</head>
<body class="theme-white">
<!-- APPLE LIQUID GLASS EXECUTIVE COCKPIT WRAPPER -->
<div class="liquid-cockpit-wrapper">
<!-- 1. TOP FLOATING NAVIGATION BAR -->
<header class="liquid-header floating-glass">
<div class="header-left">
<div class="brand-block" title="羚牛氢能 Lingniu Link">
<!-- Official Lingniu Hydrogen Logo (logo_light.svg) -->
<img class="brand-logo-svg" src="logo_light.svg" width="150" height="36" alt="羚牛氢能 Lingniu Hydrogen Mobility">
</div>
<div class="brand-divider"></div>
<div class="cockpit-title-wrap">
<h1 class="cockpit-title" id="dashboardTitle" data-i18n="vehicleModeTitle">车辆网络</h1>
<span class="de-tag">Leitstand</span>
</div>
</div>
<!-- Top Three Clean Operational KPI Capsules -->
<div class="header-kpi-group">
<div class="kpi-glass-capsule">
<span class="capsule-lbl" data-i18n="kpiTotalFleet">车辆总数</span>
<span class="capsule-val" id="kpiFleetTotal">-- <small data-i18n="unitVehicles">辆</small></span>
</div>
<div class="kpi-glass-capsule primary-capsule">
<span class="capsule-lbl" data-i18n="kpiOnlineFleet">当前在线运行</span>
<span class="capsule-val" id="kpiFleetOnline">-- <small data-i18n-append="onlinePct">辆</small></span>
</div>
<div class="kpi-glass-capsule">
<span class="capsule-lbl" data-i18n="kpiDailyMileage">今日运营里程</span>
<span class="capsule-val" id="kpiDailyDist">-- <small>km</small></span>
</div>
</div>
<!-- Header Controls: Mode Switcher, Theme Switcher & Language Switcher -->
<div class="header-controls">
<div class="glass-segmented-control">
<button class="segment-btn active" id="btnModeVehicle" onclick="switchMode('vehicle')" data-i18n="btnVehicle">车辆</button>
<button class="segment-btn" id="btnModeStation" onclick="switchMode('station')" data-i18n="btnStation">加氢站</button>
</div>
<!-- Bilingual ZH / EN Switcher -->
<div class="glass-segmented-control lang-switcher-bw">
<button class="segment-btn lang-zh-btn active" onclick="setLanguage('zh')">中</button>
<button class="segment-btn lang-en-btn" onclick="setLanguage('en')">EN</button>
</div>
<!-- Professional Vector SVG Theme Switcher (DEFAULT: LIGHT MODE) -->
<div class="theme-switcher-bw">
<button class="bw-btn theme-dark-btn" title="深色模式 (Dark Mode)" onclick="setTheme('theme-dark')">
<svg class="bw-svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<span data-i18n="themeDark">深色</span>
</button>
<button class="bw-btn theme-white-btn active" title="浅色模式 (Light Mode)" onclick="setTheme('theme-white')">
<svg class="bw-svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<span data-i18n="themeLight">浅色</span>
</button>
</div>
<div class="time-widget" id="clockTime">19:04:00</div>
</div>
</header>
<!-- 2. MAIN BODY (CENTER MAP CANVAS + RIGHT SIDEBAR) -->
<main class="cockpit-main-grid">
<!-- SPATIAL AMAP 3D CANVAS LAYER -->
<section class="map-spatial-container floating-glass">
<!-- Map Floating Status Pill -->
<div class="map-top-bar">
<div class="status-glass-pill">
<span class="pulse-ring"></span>
<span id="mapStatusText">正在同步开放平台数据…</span>
</div>
<div class="map-legend-glass">
<span class="leg-item"><i class="dot dot-primary"></i> <span data-i18n="legendPrimary">核心区域 (>100)</span></span>
<span class="leg-item"><i class="dot dot-mid"></i> <span data-i18n="legendMid">重点分布 (20-100)</span></span>
<span class="leg-item"><i class="dot dot-low"></i> <span data-i18n="legendLow">普通节点 (<20)</span></span>
</div>
</div>
<!-- AMap 3D Canvas -->
<div class="amap-canvas-box">
<div id="amapContainer"></div>
<!-- Bottom Right Floating Controls -->
<div class="map-action-controls">
<button class="glass-btn" onclick="resetMapView()" data-i18n="btnResetView">复位视角</button>
<button class="glass-btn" onclick="togglePitchView()" data-i18n="btn3dView">3D/2D 视角</button>
<button class="glass-btn" id="filterBtn" onclick="clearProvinceFilter()" data-i18n="btnNationalView">全国视图</button>
</div>
</div>
<!-- Map Footer Bar -->
<div class="map-bottom-info">
<span id="mapFooterGis" data-i18n="mapFooterGis">高质感地图引擎: 羚牛氢能GIS (AMap 3D Engine)</span>
<span id="mapFooterStatus" data-i18n="mapFooterStatus">系统状态: 稳定连接 (AES-256)</span>
<span id="selectedRegionHint" data-i18n="hintNational">视角: 全国运营态势</span>
</div>
</section>
<!-- RIGHT SIDEBAR (2 LIQUID GLASS CARDS) -->
<aside class="sidebar-operations">
<!-- Card 1: 车辆运营状态 (3 Clean States: 运行中, 静止中, 离线) -->
<div class="glass-panel sidebar-card">
<div class="panel-header">
<span class="panel-title" id="panelStatusTitle">车辆运营状态分布</span>
<span class="panel-tag">STATUS</span>
</div>
<div class="status-glass-grid3">
<div class="glass-cell cell-running">
<div class="cell-num" id="statusValue1">-- <small data-i18n="unitVehicles">辆</small></div>
<div class="cell-label"><span class="status-dot dot-mint"></span> <span id="statusLabel1" data-i18n="statusRunning">运行中</span> <span id="statusPct1"></span></div>
</div>
<div class="glass-cell cell-stopped">
<div class="cell-num" id="statusValue2">-- <small data-i18n="unitVehicles">辆</small></div>
<div class="cell-label"><span class="status-dot dot-blue"></span> <span id="statusLabel2" data-i18n="statusStopped">静止中</span> <span id="statusPct2"></span></div>
</div>
<div class="glass-cell cell-offline">
<div class="cell-num" id="statusValue3">-- <small data-i18n="unitVehicles">辆</small></div>
<div class="cell-label"><span class="status-dot dot-sub"></span> <span id="statusLabel3" data-i18n="statusOffline">离线</span> <span id="statusPct3"></span></div>
</div>
</div>
<!-- Apple Style Segmented Progress Track (3 Segments) -->
<div class="liquid-progress-bar">
<div class="seg seg-running" style="width: 52.9%;"></div>
<div class="seg seg-stopped" style="width: 30.4%;"></div>
<div class="seg seg-offline" style="width: 16.7%;"></div>
</div>
</div>
<!-- Card 2: 重点区域 TOP 排名 (Liquid Glass Ranking List) -->
<div class="glass-panel sidebar-card flex-fill-auto">
<div class="panel-header">
<span class="panel-title" id="panelRankTitle">车辆累计里程 TOP 排名</span>
<div class="glass-tab-control">
<button class="gtab active" onclick="switchRankTab('fleet')" data-i18n="rankByFleet">按车辆</button>
<button class="gtab" onclick="switchRankTab('dist')" data-i18n="rankByDist">按里程</button>
</div>
</div>
<div class="liquid-ranking-list" id="rankingListBox">
<!-- Dynamic Ranking Rows -->
</div>
</div>
</aside>
</main>
</div>
<script src="app.js?v=2026080322"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink