257 lines
18 KiB
HTML
257 lines
18 KiB
HTML
<!-- 配送调度 — ch-delivery.html -->
|
||
<style>
|
||
.chd-seg-wrap { margin-bottom: 20px; }
|
||
.chd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
|
||
.chd-stat-card { background: #fff; border-radius: var(--g-radius); padding: 18px 20px; border: 1px solid var(--g-border); box-shadow: var(--g-shadow-sm); transition: var(--g-transition); }
|
||
.chd-stat-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
|
||
.chd-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
|
||
.chd-stat-label i { width: 16px; height: 16px; }
|
||
.chd-stat-val { font-size: 24px; font-weight: 700; color: var(--g-text); }
|
||
.chd-stat-val.green { color: var(--g-success); }
|
||
.chd-stat-val.orange { color: var(--g-warning); }
|
||
|
||
/* 地图占位 */
|
||
.chd-map-placeholder {
|
||
height: 240px; border: 2px dashed #e5e7eb; border-radius: var(--g-radius-lg, 12px);
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
color: var(--g-text-muted); gap: 8px; margin-bottom: 20px; background: #fafafa;
|
||
}
|
||
.chd-map-placeholder i { width: 32px; height: 32px; opacity: .5; }
|
||
|
||
/* 在途订单卡片 */
|
||
.chd-order-card {
|
||
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
|
||
padding: 16px 20px; margin-bottom: 10px; transition: var(--g-transition);
|
||
display: flex; align-items: center; gap: 16px;
|
||
}
|
||
.chd-order-card:hover { box-shadow: var(--g-shadow-md); }
|
||
.chd-order-card.urgent { border-left: 3px solid var(--g-danger); background: #fff5f5; }
|
||
.chd-order-info { flex: 1; min-width: 0; }
|
||
.chd-order-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
|
||
.chd-order-no { font-family: 'SF Mono','Cascadia Code','Consolas',monospace; font-size: 12px; color: var(--g-text-secondary); }
|
||
.chd-order-mid { font-size: 13px; color: var(--g-text-secondary); display: flex; gap: 16px; }
|
||
.chd-order-mid span { display: flex; align-items: center; gap: 4px; }
|
||
.chd-order-mid i { width: 14px; height: 14px; }
|
||
.chd-order-actions { display: flex; gap: 8px; flex-shrink: 0; }
|
||
|
||
/* 配送商卡片 */
|
||
.chd-provider-card {
|
||
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
|
||
padding: 20px; margin-bottom: 12px; transition: var(--g-transition);
|
||
}
|
||
.chd-provider-card:hover { box-shadow: var(--g-shadow-md); }
|
||
.chd-provider-hd { display: flex; align-items: center; gap: 14px; }
|
||
.chd-provider-logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; }
|
||
.chd-provider-name { font-size: 15px; font-weight: 600; color: var(--g-text); }
|
||
.chd-provider-desc { font-size: 12px; color: var(--g-text-muted); margin-top: 2px; }
|
||
.chd-provider-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--g-border); border-bottom: 1px solid var(--g-border); }
|
||
.chd-provider-data dt { font-size: 12px; color: var(--g-text-muted); margin-bottom: 4px; }
|
||
.chd-provider-data dd { font-size: 16px; font-weight: 700; color: var(--g-text); margin: 0; }
|
||
.chd-provider-ft { display: flex; align-items: center; justify-content: space-between; }
|
||
.chd-provider-fee { font-size: 12px; color: var(--g-text-muted); }
|
||
.chd-provider-card.disabled { opacity: .55; }
|
||
|
||
/* 调度规则 */
|
||
.chd-rules { background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border); padding: 20px; margin-top: 20px; }
|
||
.chd-rule-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: var(--g-text); }
|
||
.chd-rule-item:last-child { border-bottom: none; }
|
||
.chd-rule-num { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-light, #e8f0fe); color: var(--primary); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.chd-section-hd { font-size: 15px; font-weight: 600; color: var(--g-text); padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 16px; }
|
||
|
||
/* 费用分析 */
|
||
.chd-bar-chart { margin-bottom: 24px; }
|
||
.chd-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
|
||
.chd-bar-label { width: 90px; font-size: 13px; color: var(--g-text); font-weight: 500; text-align: right; flex-shrink: 0; }
|
||
.chd-bar-track { flex: 1; height: 28px; background: #f3f4f6; border-radius: 6px; overflow: hidden; position: relative; }
|
||
.chd-bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 12px; font-weight: 600; color: #fff; transition: width .6s ease; }
|
||
.chd-bar-val { font-size: 13px; font-weight: 600; color: var(--g-text); width: 70px; text-align: right; flex-shrink: 0; }
|
||
</style>
|
||
|
||
<!-- 分段Tab -->
|
||
<div class="chd-seg-wrap">
|
||
<div class="g-seg">
|
||
<div class="g-seg-item active" onclick="chdSwitchTab(this,'chd-tab-realtime')" data-tab="realtime">实时配送</div>
|
||
<div class="g-seg-item" onclick="chdSwitchTab(this,'chd-tab-provider')" data-tab="provider">运力管理</div>
|
||
<div class="g-seg-item" onclick="chdSwitchTab(this,'chd-tab-cost')" data-tab="cost">费用分析</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab1: 实时配送 -->
|
||
<div id="chd-tab-realtime">
|
||
<div class="chd-stats">
|
||
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="bike"></i>配送中</div><div class="chd-stat-val">12</div></div>
|
||
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="clock"></i>待取餐</div><div class="chd-stat-val orange">3</div></div>
|
||
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="timer"></i>平均配送时长</div><div class="chd-stat-val">28<span style="font-size:14px;font-weight:400;color:var(--g-text-muted);">分钟</span></div></div>
|
||
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="target"></i>今日准时率</div><div class="chd-stat-val green">94.2%</div></div>
|
||
</div>
|
||
|
||
<div class="chd-map-placeholder">
|
||
<i data-lucide="map-pin"></i>
|
||
<span style="font-size:14px;font-weight:500;">配送地图区域</span>
|
||
<span style="font-size:12px;">实时显示骑手位置与配送路线</span>
|
||
</div>
|
||
|
||
<div class="chd-section-hd">在途订单</div>
|
||
|
||
<div class="chd-order-card urgent">
|
||
<div class="chd-order-info">
|
||
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212045</span><span class="g-tag g-tag-red">即将超时</span><span class="g-tag" style="background:#fff7e6;color:#d48806;">美团配送</span></div>
|
||
<div class="chd-order-mid"><span><i data-lucide="user"></i>王师傅 138****6789</span><span><i data-lucide="clock"></i>取餐 12:20 → 预计 12:50</span></div>
|
||
</div>
|
||
<div class="chd-order-actions"><a class="g-action" style="color:var(--g-danger);">催单</a><a class="g-action">联系骑手</a></div>
|
||
</div>
|
||
<div class="chd-order-card">
|
||
<div class="chd-order-info">
|
||
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212048</span><span class="g-tag g-tag-blue">配送中</span><span class="g-tag" style="background:#fff7e6;color:#d48806;">美团配送</span></div>
|
||
<div class="chd-order-mid"><span><i data-lucide="user"></i>李骑手 139****2345</span><span><i data-lucide="clock"></i>取餐 12:30 → 预计 13:00</span></div>
|
||
</div>
|
||
<div class="chd-order-actions"><a class="g-action">联系骑手</a></div>
|
||
</div>
|
||
<div class="chd-order-card">
|
||
<div class="chd-order-info">
|
||
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212051</span><span class="g-tag g-tag-blue">配送中</span><span class="g-tag" style="background:#fee2e2;color:#dc2626;">达达快送</span></div>
|
||
<div class="chd-order-mid"><span><i data-lucide="user"></i>张师傅 137****8901</span><span><i data-lucide="clock"></i>取餐 12:35 → 预计 13:10</span></div>
|
||
</div>
|
||
<div class="chd-order-actions"><a class="g-action">联系骑手</a></div>
|
||
</div>
|
||
<div class="chd-order-card">
|
||
<div class="chd-order-info">
|
||
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212053</span><span class="g-tag g-tag-orange">待取餐</span><span class="g-tag" style="background:#f0f0f0;color:#333;">顺丰同城</span></div>
|
||
<div class="chd-order-mid"><span><i data-lucide="user"></i>陈骑手 136****5678</span><span><i data-lucide="clock"></i>预计取餐 12:45</span></div>
|
||
</div>
|
||
<div class="chd-order-actions"><a class="g-action">催取餐</a><a class="g-action">联系骑手</a></div>
|
||
</div>
|
||
<div class="chd-order-card">
|
||
<div class="chd-order-info">
|
||
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212055</span><span class="g-tag g-tag-orange">待取餐</span><span class="g-tag" style="background:#fff7e6;color:#d48806;">美团配送</span></div>
|
||
<div class="chd-order-mid"><span><i data-lucide="user"></i>赵骑手 135****4321</span><span><i data-lucide="clock"></i>预计取餐 12:48</span></div>
|
||
</div>
|
||
<div class="chd-order-actions"><a class="g-action">催取餐</a><a class="g-action">联系骑手</a></div>
|
||
</div>
|
||
<div class="chd-order-card">
|
||
<div class="chd-order-info">
|
||
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212057</span><span class="g-tag g-tag-blue">配送中</span><span class="g-tag" style="background:#fee2e2;color:#dc2626;">达达快送</span></div>
|
||
<div class="chd-order-mid"><span><i data-lucide="user"></i>刘师傅 133****7654</span><span><i data-lucide="clock"></i>取餐 12:25 → 预计 12:55</span></div>
|
||
</div>
|
||
<div class="chd-order-actions"><a class="g-action">联系骑手</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab2: 运力管理 -->
|
||
<div id="chd-tab-provider" style="display:none;">
|
||
<p style="font-size:13px;color:var(--g-text-secondary);margin-bottom:20px;line-height:1.6;">管理已接入的配送服务商，系统将根据距离、费用、运力自动选择最优配送方案。</p>
|
||
|
||
<div class="chd-provider-card">
|
||
<div class="chd-provider-hd">
|
||
<div class="chd-provider-logo" style="background:#faad14;">美</div>
|
||
<div style="flex:1;"><div class="chd-provider-name">美团配送</div><div class="chd-provider-desc">美团专送骑手，覆盖3km</div></div>
|
||
<button class="g-toggle on" onclick="toggleSwitch(this)"></button>
|
||
</div>
|
||
<div class="chd-provider-data">
|
||
<div><dt>今日派单</dt><dd>38</dd></div>
|
||
<div><dt>平均时长</dt><dd>26分钟</dd></div>
|
||
<div><dt>准时率</dt><dd>96%</dd></div>
|
||
</div>
|
||
<div class="chd-provider-ft"><span class="chd-provider-fee">基础费 ¥5 + 超3km每km加 ¥2</span></div>
|
||
</div>
|
||
|
||
<div class="chd-provider-card">
|
||
<div class="chd-provider-hd">
|
||
<div class="chd-provider-logo" style="background:#f5222d;">达</div>
|
||
<div style="flex:1;"><div class="chd-provider-name">达达快送</div><div class="chd-provider-desc">即时配送，覆盖5km</div></div>
|
||
<button class="g-toggle on" onclick="toggleSwitch(this)"></button>
|
||
</div>
|
||
<div class="chd-provider-data">
|
||
<div><dt>今日派单</dt><dd>22</dd></div>
|
||
<div><dt>平均时长</dt><dd>32分钟</dd></div>
|
||
<div><dt>准时率</dt><dd>91%</dd></div>
|
||
</div>
|
||
<div class="chd-provider-ft"><span class="chd-provider-fee">基础费 ¥6 + 超3km每km加 ¥1.5</span></div>
|
||
</div>
|
||
|
||
<div class="chd-provider-card">
|
||
<div class="chd-provider-hd">
|
||
<div class="chd-provider-logo" style="background:#1a1a2e;">顺</div>
|
||
<div style="flex:1;"><div class="chd-provider-name">顺丰同城</div><div class="chd-provider-desc">高品质配送，覆盖10km</div></div>
|
||
<button class="g-toggle on" onclick="toggleSwitch(this)"></button>
|
||
</div>
|
||
<div class="chd-provider-data">
|
||
<div><dt>今日派单</dt><dd>8</dd></div>
|
||
<div><dt>平均时长</dt><dd>35分钟</dd></div>
|
||
<div><dt>准时率</dt><dd>98%</dd></div>
|
||
</div>
|
||
<div class="chd-provider-ft"><span class="chd-provider-fee">基础费 ¥8 + 超3km每km加 ¥2.5</span></div>
|
||
</div>
|
||
|
||
<div class="chd-provider-card disabled">
|
||
<div class="chd-provider-hd">
|
||
<div class="chd-provider-logo" style="background:color-mix(in srgb, var(--primary) 80%, #fff);">自</div>
|
||
<div style="flex:1;"><div class="chd-provider-name">自配送</div><div class="chd-provider-desc">自有骑手配送</div></div>
|
||
<button class="g-toggle" onclick="toggleSwitch(this)"></button>
|
||
</div>
|
||
<div class="chd-provider-data">
|
||
<div><dt>今日派单</dt><dd>—</dd></div>
|
||
<div><dt>平均时长</dt><dd>—</dd></div>
|
||
<div><dt>准时率</dt><dd>—</dd></div>
|
||
</div>
|
||
<div class="chd-provider-ft"><span class="chd-provider-fee">启用后可配置自有骑手和配送范围</span></div>
|
||
</div>
|
||
|
||
<div class="chd-rules">
|
||
<div class="chd-section-hd">智能调度规则</div>
|
||
<div class="chd-rule-item"><span class="chd-rule-num">1</span>3km内优先使用<strong style="color:var(--primary);margin:0 4px;">美团配送</strong>（费用最低）</div>
|
||
<div class="chd-rule-item"><span class="chd-rule-num">2</span>3~5km使用<strong style="color:var(--primary);margin:0 4px;">达达快送</strong></div>
|
||
<div class="chd-rule-item"><span class="chd-rule-num">3</span>5km以上使用<strong style="color:var(--primary);margin:0 4px;">顺丰同城</strong></div>
|
||
<div style="margin-top:14px;"><button class="g-btn g-btn-sm">编辑规则</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab3: 费用分析 -->
|
||
<div id="chd-tab-cost" style="display:none;">
|
||
<div class="chd-stats" style="grid-template-columns:repeat(3,1fr);">
|
||
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="receipt"></i>本月配送总费用</div><div class="chd-stat-val">¥4,860</div></div>
|
||
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="divide"></i>单均配送费</div><div class="chd-stat-val">¥5.2</div></div>
|
||
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="trending-down"></i>环比变化</div><div class="chd-stat-val green">-3.8%</div></div>
|
||
</div>
|
||
|
||
<div class="g-card" style="padding:20px;margin-bottom:20px;">
|
||
<div class="chd-section-hd">各配送商费用对比</div>
|
||
<div class="chd-bar-chart">
|
||
<div class="chd-bar-row"><span class="chd-bar-label">美团配送</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:100%;background:#faad14;">¥2,180</div></div><span class="chd-bar-val">44.9%</span></div>
|
||
<div class="chd-bar-row"><span class="chd-bar-label">达达快送</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:71%;background:#f5222d;">¥1,560</div></div><span class="chd-bar-val">32.1%</span></div>
|
||
<div class="chd-bar-row"><span class="chd-bar-label">顺丰同城</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:38%;background:#1a1a2e;">¥820</div></div><span class="chd-bar-val">16.9%</span></div>
|
||
<div class="chd-bar-row"><span class="chd-bar-label">自配送</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:14%;background:var(--primary);">¥300</div></div><span class="chd-bar-val">6.2%</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-card" style="padding:20px;">
|
||
<div class="chd-section-hd">近7天配送费趋势</div>
|
||
<table class="g-table">
|
||
<thead>
|
||
<tr><th>日期</th><th style="text-align:right;">美团配送</th><th style="text-align:right;">达达快送</th><th style="text-align:right;">顺丰同城</th><th style="text-align:right;">自配送</th><th style="text-align:right;">合计</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>2026-02-12</td><td style="text-align:right;">¥320</td><td style="text-align:right;">¥228</td><td style="text-align:right;">¥120</td><td style="text-align:right;">¥45</td><td style="text-align:right;font-weight:600;">¥713</td></tr>
|
||
<tr><td>2026-02-11</td><td style="text-align:right;">¥298</td><td style="text-align:right;">¥215</td><td style="text-align:right;">¥108</td><td style="text-align:right;">¥40</td><td style="text-align:right;font-weight:600;">¥661</td></tr>
|
||
<tr><td>2026-02-10</td><td style="text-align:right;">¥335</td><td style="text-align:right;">¥240</td><td style="text-align:right;">¥135</td><td style="text-align:right;">¥50</td><td style="text-align:right;font-weight:600;">¥760</td></tr>
|
||
<tr><td>2026-02-09</td><td style="text-align:right;">¥310</td><td style="text-align:right;">¥220</td><td style="text-align:right;">¥115</td><td style="text-align:right;">¥42</td><td style="text-align:right;font-weight:600;">¥687</td></tr>
|
||
<tr><td>2026-02-08</td><td style="text-align:right;">¥345</td><td style="text-align:right;">¥248</td><td style="text-align:right;">¥128</td><td style="text-align:right;">¥48</td><td style="text-align:right;font-weight:600;">¥769</td></tr>
|
||
<tr><td>2026-02-07</td><td style="text-align:right;">¥288</td><td style="text-align:right;">¥205</td><td style="text-align:right;">¥98</td><td style="text-align:right;">¥38</td><td style="text-align:right;font-weight:600;">¥629</td></tr>
|
||
<tr><td>2026-02-06</td><td style="text-align:right;">¥284</td><td style="text-align:right;">¥204</td><td style="text-align:right;">¥116</td><td style="text-align:right;">¥37</td><td style="text-align:right;font-weight:600;">¥641</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function chdSwitchTab(el, tabId) {
|
||
el.parentElement.querySelectorAll('.g-seg-item').forEach(function(item) { item.classList.remove('active'); });
|
||
el.classList.add('active');
|
||
document.getElementById('chd-tab-realtime').style.display = tabId === 'chd-tab-realtime' ? '' : 'none';
|
||
document.getElementById('chd-tab-provider').style.display = tabId === 'chd-tab-provider' ? '' : 'none';
|
||
document.getElementById('chd-tab-cost').style.display = tabId === 'chd-tab-cost' ? '' : 'none';
|
||
}
|
||
function toggleSwitch(el) { el.classList.toggle('on'); }
|
||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||
</script>
|