修复地图渲染的问题
This commit is contained in:
CN-JS-HuiBai
@@ -205,8 +205,10 @@
|
||||
</h2>
|
||||
</div>
|
||||
<div class="chart-legend">
|
||||
<span class="legend-item" id="legendRx" style="cursor: pointer;" title="点击切换 接收 (RX) 显示/隐藏"><span class="legend-dot legend-rx"></span>接收 (RX)</span>
|
||||
<span class="legend-item" id="legendTx" style="cursor: pointer;" title="点击切换 发送 (TX) 显示/隐藏"><span class="legend-dot legend-tx"></span>发送 (TX)</span>
|
||||
<span class="legend-item" id="legendRx" style="cursor: pointer;" title="点击切换 接收 (RX) 显示/隐藏"><span
|
||||
class="legend-dot legend-rx"></span>接收 (RX)</span>
|
||||
<span class="legend-item" id="legendTx" style="cursor: pointer;" title="点击切换 发送 (TX) 显示/隐藏"><span
|
||||
class="legend-dot legend-tx"></span>发送 (TX)</span>
|
||||
<span class="legend-item disabled" id="legendP95" style="cursor: pointer;" title="点击切换 P95 线显示/隐藏">
|
||||
<span class="legend-dot legend-p95"></span>95计费 (<span id="p95LabelText">上行</span>)
|
||||
</span>
|
||||
@@ -252,7 +254,8 @@
|
||||
</h2>
|
||||
<div class="chart-header-actions">
|
||||
<button class="btn-icon" id="btnExpandGlobe" title="放大显示">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
style="width: 18px; height: 18px;">
|
||||
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
@@ -291,8 +294,8 @@
|
||||
</h2>
|
||||
<div class="chart-header-right">
|
||||
<div class="search-box">
|
||||
<input type="search" id="serverSearchFilter" name="q-filter-server" placeholder="检索服务器名称..." autocomplete="one-time-code"
|
||||
spellcheck="false">
|
||||
<input type="search" id="serverSearchFilter" name="q-filter-server" placeholder="检索服务器名称..."
|
||||
autocomplete="one-time-code" spellcheck="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="search-icon">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
@@ -370,15 +373,16 @@
|
||||
<h3>添加数据源</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group" style="flex: 0.8;">
|
||||
<label for="sourceType">类型</label>
|
||||
<select id="sourceType" style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); outline: none;">
|
||||
<option value="prometheus">Prometheus</option>
|
||||
<option value="blackbox">Blackbox Exporter</option>
|
||||
</select>
|
||||
<label for="sourceType">类型</label>
|
||||
<select id="sourceType"
|
||||
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); outline: none;">
|
||||
<option value="prometheus">Prometheus</option>
|
||||
<option value="blackbox">Blackbox Exporter</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" style="flex: 1;">
|
||||
<label for="sourceName">名称</label>
|
||||
<input type="text" id="sourceName" placeholder="例：生产环境" autocomplete="off">
|
||||
<label for="sourceName">名称</label>
|
||||
<input type="text" id="sourceName" placeholder="例：生产环境" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group form-group-wide">
|
||||
<label for="sourceUrl">URL 地址</label>
|
||||
@@ -390,11 +394,14 @@
|
||||
<label for="sourceDesc">描述 (可选)</label>
|
||||
<input type="text" id="sourceDesc" placeholder="数据源描述" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group" id="serverSourceOption" style="display: flex; align-items: flex-end; padding-bottom: 8px;">
|
||||
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;">
|
||||
<input type="checkbox" id="isServerSource" checked style="width: 16px; height: 16px; accent-color: var(--accent-indigo);">
|
||||
<span>用于服务器展示</span>
|
||||
</label>
|
||||
<div class="form-group" id="serverSourceOption"
|
||||
style="display: flex; align-items: flex-end; padding-bottom: 8px;">
|
||||
<label
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;">
|
||||
<input type="checkbox" id="isServerSource" checked
|
||||
style="width: 16px; height: 16px; accent-color: var(--accent-indigo);">
|
||||
<span>用于服务器展示</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-test" id="btnTest">测试连接</button>
|
||||
@@ -454,46 +461,55 @@
|
||||
<option value="both">统计上行+下行 (Sum)</option>
|
||||
</select>
|
||||
</div>
|
||||
<h3 style="margin-top: 30px; border-top: 1px solid var(--border-color); padding-top: 20px;">Blackbox 延迟连线管理</h3>
|
||||
<h3 style="margin-top: 30px; border-top: 1px solid var(--border-color); padding-top: 20px;">Blackbox
|
||||
延迟连线管理</h3>
|
||||
<div class="latency-routes-manager">
|
||||
<!-- Add Route Form -->
|
||||
<div class="add-route-mini-form" style="background: rgba(255,255,255,0.02); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color);">
|
||||
<div class="form-row">
|
||||
<div class="form-group" style="flex: 1.5;">
|
||||
<label>数据源 (Blackbox)</label>
|
||||
<select id="routeSourceSelect" style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);">
|
||||
<option value="">-- 选择数据源 --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>起航点</label>
|
||||
<input type="text" id="routeSourceInput" placeholder="例：China">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>目的地</label>
|
||||
<input type="text" id="routeDestInput" placeholder="例：United States">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" style="margin-top: 10px; align-items: flex-end;">
|
||||
<div class="form-group" style="flex: 2;">
|
||||
<label>Blackbox 探测目标 (IP 或 域名)</label>
|
||||
<input type="text" id="routeTargetInput" placeholder="例：1.1.1.1 或 google.com">
|
||||
</div>
|
||||
<div class="form-actions" style="padding-bottom: 0; display: flex; gap: 8px;">
|
||||
<button class="btn btn-add" id="btnAddRoute" style="padding: 10px 24px;">添加线路</button>
|
||||
<button class="btn btn-test" id="btnCancelEditRoute" style="display: none; padding: 10px 15px; background: rgba(0,0,0,0.3);">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add Route Form -->
|
||||
<div class="add-route-mini-form"
|
||||
style="background: rgba(255,255,255,0.02); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color);">
|
||||
<div class="form-row">
|
||||
<div class="form-group" style="flex: 1.5;">
|
||||
<label>数据源 (Blackbox)</label>
|
||||
<select id="routeSourceSelect"
|
||||
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);">
|
||||
<option value="">-- 选择数据源 --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>起航点</label>
|
||||
<input type="text" id="routeSourceInput" placeholder="例：China">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>目的地</label>
|
||||
<input type="text" id="routeDestInput" placeholder="例：United States">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Routes List -->
|
||||
<div class="latency-routes-list-container">
|
||||
<h4 style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;; margin-bottom: 10px;">已配置线路</h4>
|
||||
<div id="latencyRoutesList" class="latency-routes-list" style="display: flex; flex-direction: column; gap: 10px;">
|
||||
<!-- Routes will be injected here -->
|
||||
<div class="route-empty" style="text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.85rem; background: rgba(0,0,0,0.1); border-radius: 8px;">暂无线路</div>
|
||||
</div>
|
||||
<div class="form-row" style="margin-top: 10px; align-items: flex-end;">
|
||||
<div class="form-group" style="flex: 2;">
|
||||
<label>Blackbox 探测目标 (IP 或 域名)</label>
|
||||
<input type="text" id="routeTargetInput" placeholder="例：1.1.1.1 或 google.com">
|
||||
</div>
|
||||
<div class="form-actions" style="padding-bottom: 0; display: flex; gap: 8px;">
|
||||
<button class="btn btn-add" id="btnAddRoute" style="padding: 10px 24px;">添加线路</button>
|
||||
<button class="btn btn-test" id="btnCancelEditRoute"
|
||||
style="display: none; padding: 10px 15px; background: rgba(0,0,0,0.3);">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Routes List -->
|
||||
<div class="latency-routes-list-container">
|
||||
<h4
|
||||
style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;; margin-bottom: 10px;">
|
||||
已配置线路</h4>
|
||||
<div id="latencyRoutesList" class="latency-routes-list"
|
||||
style="display: flex; flex-direction: column; gap: 10px;">
|
||||
<!-- Routes will be injected here -->
|
||||
<div class="route-empty"
|
||||
style="text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.85rem; background: rgba(0,0,0,0.1); border-radius: 8px;">
|
||||
暂无线路</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">
|
||||
<button class="btn btn-add" id="btnSaveSiteSettings">保存基础设置</button>
|
||||
@@ -547,8 +563,7 @@
|
||||
<!-- Metric Items are injected here -->
|
||||
<div class="detail-metrics-list" id="detailMetricsList"></div>
|
||||
|
||||
<div class="detail-partitions-container metric-item" id="detailPartitionsContainer"
|
||||
style="display: none;">
|
||||
<div class="detail-partitions-container metric-item" id="detailPartitionsContainer" style="display: none;">
|
||||
<div class="metric-item-header" id="partitionHeader">
|
||||
<div class="metric-label-group">
|
||||
<span class="metric-label">磁盘分区详情 (已挂载)</span>
|
||||
|
||||
Reference in New Issue
Block a user