-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
184 lines (173 loc) · 14.9 KB
/
Copy pathindex.html
File metadata and controls
184 lines (173 loc) · 14.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#18201f">
<meta name="description" content="ECA Voyage Lab：面向船舶排放控制区的航线、航速、排放与成本交互实验室。">
<title>ECA Voyage Lab · 排放控制区航次策略实验室</title>
<link rel="stylesheet" href="./vendor/leaflet/leaflet.css">
<link rel="stylesheet" href="./assets/styles/app.css">
</head>
<body>
<svg class="icon-sprite" aria-hidden="true">
<symbol id="icon-ship" viewBox="0 0 24 24"><path d="M12 10.2V14M12 2v3M6 8h12l2 6H4l2-6ZM3 18c1.2 0 1.8-1 3-1s1.8 1 3 1 1.8-1 3-1 1.8 1 3 1 1.8-1 3-1 1.8 1 3 1M5 22c1.2 0 1.8-1 3-1s1.8 1 3 1 1.8-1 3-1 1.8 1 3 1"/></symbol>
<symbol id="icon-play" viewBox="0 0 24 24"><polygon points="6 3 20 12 6 21 6 3"/></symbol>
<symbol id="icon-pause" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></symbol>
<symbol id="icon-reset" viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5"/></symbol>
<symbol id="icon-gauge" viewBox="0 0 24 24"><path d="M4.9 19a10 10 0 1 1 14.2 0M12 13l4-4M9 19h6"/></symbol>
<symbol id="icon-route" viewBox="0 0 24 24"><circle cx="6" cy="19" r="3"/><circle cx="18" cy="5" r="3"/><path d="M6 16V8a3 3 0 0 1 3-3h6"/></symbol>
<symbol id="icon-sliders" viewBox="0 0 24 24"><path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/></symbol>
<symbol id="icon-layers" viewBox="0 0 24 24"><path d="m12 2 9 5-9 5-9-5 9-5ZM3 12l9 5 9-5M3 17l9 5 9-5"/></symbol>
<symbol id="icon-pencil" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z"/></symbol>
<symbol id="icon-chart" viewBox="0 0 24 24"><path d="M3 3v18h18M7 16l4-5 4 3 5-7"/></symbol>
<symbol id="icon-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></symbol>
<symbol id="icon-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
<symbol id="icon-minus" viewBox="0 0 24 24"><path d="M5 12h14"/></symbol>
<symbol id="icon-focus" viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></symbol>
</svg>
<div id="appShell">
<main id="workspace">
<header class="topbar">
<div class="brand-lockup">
<span class="brand-mark" aria-hidden="true"><svg><use href="#icon-ship"></use></svg></span>
<div>
<div class="brand-title">ECA Voyage Lab</div>
<div class="brand-kicker">排放控制区航次策略实验室</div>
</div>
</div>
<div class="model-state" id="modelState"><i></i><span id="scenarioName">均衡策略</span><b></b><span id="modelStateLabel">策略已更新</span></div>
<div class="topbar-actions">
<div class="segmented" role="group" aria-label="地图指标模式">
<button type="button" class="segment is-active" data-view="optimized">优化策略</button>
<button type="button" class="segment" data-view="baseline">统一航速</button>
<button type="button" class="segment" data-view="emissions">排放强度</button>
</div>
<div class="playback" role="group" aria-label="船舶动画">
<button id="btnPlay" type="button" class="icon-button is-active" title="播放航次"><svg><use href="#icon-play"></use></svg></button>
<button id="btnPause" type="button" class="icon-button" title="暂停航次"><svg><use href="#icon-pause"></use></svg></button>
<button id="btnRestart" type="button" class="icon-button" title="重新开始"><svg><use href="#icon-reset"></use></svg></button>
</div>
</div>
</header>
<section id="mapStage" aria-label="中国沿海排放控制区与航线地图">
<div id="map" role="application" aria-label="真实地图上的中国沿海排放控制区与航线"></div>
<div class="map-metrics" aria-live="polite">
<div><span>航次总成本</span><strong id="metricCost">--</strong></div>
<div><span>CO₂ 排放</span><strong id="metricCo2">--</strong></div>
<div><span>计划周期</span><strong id="metricDuration">--</strong></div>
<div><span>策略节约</span><strong id="metricSaving">--</strong></div>
</div>
<div class="map-tools" role="group" aria-label="地图缩放">
<button id="btnZoomIn" class="icon-button light" type="button" title="放大"><svg><use href="#icon-plus"></use></svg></button>
<button id="btnZoomOut" class="icon-button light" type="button" title="缩小"><svg><use href="#icon-minus"></use></svg></button>
<button id="btnFit" class="icon-button light" type="button" title="复位地图"><svg><use href="#icon-focus"></use></svg></button>
</div>
<div id="editBadge" class="edit-badge" hidden><svg><use href="#icon-pencil"></use></svg><span>航线编辑中</span></div>
<div class="map-legend">
<span><i class="legend-area"></i>ECA 研究判区</span>
<span><i class="legend-line eca"></i>ECA 航段</span>
<span><i class="legend-line open"></i>区外航段</span>
<span><i class="legend-port"></i>挂靠港口</span>
</div>
<div class="map-source">OpenStreetMap · WGS84 · ECA 边界为研究性估算</div>
</section>
<section id="analyticsDock" class="analytics-dock">
<div class="dock-tabs" role="tablist" aria-label="研究分析视图">
<button id="tabRoute" class="dock-tab is-active" type="button" role="tab" data-tab="route" aria-selected="true">航段剖析</button>
<button id="tabCost" class="dock-tab" type="button" role="tab" data-tab="cost" aria-selected="false">成本构成</button>
<button id="tabSensitivity" class="dock-tab" type="button" role="tab" data-tab="sensitivity" aria-selected="false">敏感性</button>
<button id="tabMethod" class="dock-tab" type="button" role="tab" data-tab="method" aria-selected="false">研究方法</button>
<span class="analysis-context" id="analysisContext">大连 → 青岛</span>
</div>
<div id="panelRoute" class="dock-panel is-active route-panel" data-panel="route" role="tabpanel">
<div class="route-facts" id="routeFacts"></div>
<section class="dock-chart"><div class="dock-title"><span>分区航速</span><span>节</span></div><canvas id="speedChart"></canvas></section>
<section class="timeline-block"><div class="dock-title"><span>到港进度</span><span id="timelineStatus">计划内</span></div><div id="timelineList" class="timeline-list"></div></section>
</div>
<div id="panelCost" class="dock-panel cost-panel" data-panel="cost" role="tabpanel" hidden>
<section class="dock-chart cost-chart-block"><div class="dock-title"><span>统一航速与优化策略</span><span>美元</span></div><canvas id="costChart"></canvas></section>
<div class="cost-facts" id="costFacts"></div>
</div>
<div id="panelSensitivity" class="dock-panel sensitivity-panel" data-panel="sensitivity" role="tabpanel" hidden>
<section class="dock-chart sensitivity-chart-block"><div class="dock-title"><span id="sensitivityTitle">低硫燃油价格</span><span id="sensitivityUnit">美元/吨</span></div><canvas id="sensitivityChart"></canvas></section>
<div class="sensitivity-switch" role="group" aria-label="敏感性变量">
<button class="is-active" type="button" data-sensitivity="fuel">MGO 价格</button>
<button type="button" data-sensitivity="carbon">碳价</button>
<button type="button" data-sensitivity="schedule">计划周期</button>
</div>
<div class="sensitivity-readout" id="sensitivityReadout"></div>
</div>
<div id="panelMethod" class="dock-panel method-panel" data-panel="method" role="tabpanel" hidden>
<div><span>空间方法</span><strong>球面折线测距</strong><p>航路点之间使用 Haversine 大圆距离，并以 5 海里采样识别分区。</p></div>
<div><span>策略方法</span><strong>离散航速搜索</strong><p>在时间约束内组合 ECA 与区外航速，使燃油和碳成本之和最小。</p></div>
<div><span>数据边界</span><strong>研究性判区</strong><p>海侧点来自政策坐标，缺失的岸线闭合使用 Natural Earth 10m 岸线估算。</p></div>
</div>
</section>
</main>
<aside id="strategyPanel">
<header class="panel-heading">
<div><span>ROUTE STRATEGY DESK</span><h1>航线策略台</h1></div>
<b>4 港 · ECA 避让</b>
</header>
<section class="control-section">
<div class="section-heading"><svg><use href="#icon-route"></use></svg><span>航线与航段</span></div>
<label class="select-field"><span>当前航段</span><select id="legSelect"></select></label>
<div class="route-summary">
<div><span>总距离</span><strong id="routeDistance">--</strong></div>
<div><span>ECA 内</span><strong id="routeEcaDistance">--</strong></div>
<div><span>区外</span><strong id="routeOpenDistance">--</strong></div>
</div>
<div class="button-row">
<button id="btnEditRoute" class="button-secondary" type="button"><svg><use href="#icon-pencil"></use></svg><span>编辑航线</span></button>
<button id="btnResetRoute" class="button-secondary icon-only" type="button" title="重置当前航段"><svg><use href="#icon-reset"></use></svg></button>
</div>
</section>
<section class="control-section">
<div class="section-heading"><svg><use href="#icon-gauge"></use></svg><span>研究情景</span></div>
<div class="scenario-grid">
<button class="scenario-button is-active" type="button" data-scenario="balanced">均衡策略</button>
<button class="scenario-button" type="button" data-scenario="fuelSpread">价差扩大</button>
<button class="scenario-button" type="button" data-scenario="carbon">高碳价</button>
<button class="scenario-button" type="button" data-scenario="schedule">紧班期</button>
</div>
</section>
<section class="control-section">
<div class="section-heading"><svg><use href="#icon-sliders"></use></svg><span>成本与约束</span></div>
<label class="range-field"><span><span>MGO 低硫燃油</span><output id="mgoPriceValue"></output></span><input id="mgoPrice" data-setting="mgoPrice" type="range" min="400" max="1100" step="10"><i><span>400</span><span>1100 美元/吨</span></i></label>
<label class="range-field"><span><span>HFO 重硫燃油</span><output id="hfoPriceValue"></output></span><input id="hfoPrice" data-setting="hfoPrice" type="range" min="200" max="700" step="10"><i><span>200</span><span>700 美元/吨</span></i></label>
<label class="range-field"><span><span>碳排放价格</span><output id="carbonPriceValue"></output></span><input id="carbonPrice" data-setting="carbonPrice" type="range" min="0" max="120" step="5"><i><span>0</span><span>120 美元/吨</span></i></label>
<label class="range-field"><span><span>计划周期</span><output id="planDaysValue"></output></span><input id="planDays" data-setting="planDays" type="range" min="7.25" max="10" step="0.25"><i><span>7.25 天</span><span>10 天</span></i></label>
<label class="range-field"><span><span>单港停留</span><output id="portHoursValue"></output></span><input id="portHours" data-setting="portHours" type="range" min="2" max="18" step="1"><i><span>2 小时</span><span>18 小时</span></i></label>
</section>
<section class="control-section compact-controls">
<div class="section-heading"><svg><use href="#icon-chart"></use></svg><span>船舶性能</span></div>
<div class="field-grid two-column">
<label><span>最低航速</span><select id="speedMin" data-setting="speedMin"></select></label>
<label><span>最高航速</span><select id="speedMax" data-setting="speedMax"></select></label>
</div>
<label class="range-field"><span><span>油耗修正系数</span><output id="fuelFactorValue"></output></span><input id="fuelFactor" data-setting="fuelFactor" type="range" min="0.75" max="1.35" step="0.01"></label>
<label class="range-field"><span><span>碳排放因子</span><output id="carbonFactorValue"></output></span><input id="carbonFactor" data-setting="carbonFactor" type="range" min="2.8" max="3.3" step="0.01"></label>
</section>
<section class="control-section">
<div class="section-heading"><svg><use href="#icon-layers"></use></svg><span>地图图层</span></div>
<div class="toggle-list">
<label><span>ECA 研究判区</span><input id="showEcaArea" type="checkbox" checked></label>
<label><span>边界控制点</span><input id="showControlPoints" type="checkbox" checked></label>
<label><span>内河边界断面</span><input id="showInland" type="checkbox"></label>
<label><span>船舶航行动画</span><input id="showShip" type="checkbox" checked></label>
</div>
</section>
<section class="data-note">
<svg><use href="#icon-info"></use></svg>
<p><strong>边界状态</strong><span>第 60 点无数值坐标，沿海着色面由官方海侧控制线与公共岸线闭合，仅用于研究展示和距离估算。</span></p>
</section>
</aside>
</div>
<script src="./vendor/leaflet/leaflet.js"></script>
<script src="./src/data/eca.data.js"></script>
<script src="./src/js/model.js"></script>
<script src="./src/js/render.js"></script>
<script src="./src/js/ui.js"></script>
</body>
</html>