huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页细节调整

Browse Source
This commit is contained in:
huangzhenbao
2026-02-06 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
pages/mall/analytics/delivery-analysis.uvue
View File

@@ -1,8 +1,8 @@
<template>
<template>
<view class="page" @click="closeMoreMenu">
<!-- 鍥哄畾椤堕儴瀵艰埅鏍?-->
<!-- 固定顶部导航栏 -->
<AnalyticsTopBar
:title="'閰嶉€佹晥鐜囧垎鏋?"
:title="'配送效率分析'"
:lastUpdateTime="lastUpdateTime"
:sidebarVisible="showSidebarMenu"
@menu-click="handleMenu"
@@ -16,18 +16,18 @@
/>
<view class="page-layout">
<!-- 渚ц竟鏍忚彍鍗曠粍浠?-->
<!-- 侧边栏菜单组件 -->
<AnalyticsSidebarMenu
:visible="showSidebarMenu"
:currentPath="currentPath"
@visible-change="handleSidebarUpdate"
/>
<!-- 涓诲唴瀹瑰尯鍩?-->
<!-- 主内容区域 -->
<view class="main-content">
<view class="container">
<!-- 鏃堕棿缁村害绛涢€夛紙蹇嵎 + 鑷畾涔夛級 -->
<!-- 时间维度筛选（快捷 + 自定义） -->
<view class="tabs">
<view
v-for="p in timePeriods"
@@ -43,7 +43,8 @@
:class="{ active: customRangeEnabled }"
@click="toggleCustomRange"
>
鑷畾涔? </view>
自定义
</view>
</view>
<AnalyticsDateRangePicker
@@ -54,53 +55,53 @@
@clear="onDateRangeClear"
/>
<!-- KPI 鎸囨爣鍗＄墖 -->
<!-- KPI 指标卡片 -->
<view class="kpi-grid">
<view class="kpi-card">
<text class="kpi-label">閰嶉€佹椂鏁?/text>
<text class="kpi-value">{{ deliveryData.avg_delivery_time }}鍒嗛挓</text>
<text class="kpi-meta">杈冧笂鏈燂細{{ formatPct(deliveryData.time_growth) }}</text>
<text class="kpi-label">配送时效</text>
<text class="kpi-value">{{ deliveryData.avg_delivery_time }}分钟</text>
<text class="kpi-meta">较上期：{{ formatPct(deliveryData.time_growth) }}</text>
</view>
<view class="kpi-card">
<text class="kpi-label">閰嶉€佽垂鐢?/text>
<text class="kpi-value">楼{{ formatMoney(deliveryData.total_fee) }}</text>
<text class="kpi-meta">骞冲潎锛毬{ formatMoney(deliveryData.avg_fee) }}</text>
<text class="kpi-label">配送费用</text>
<text class="kpi-value">¥{{ formatMoney(deliveryData.total_fee) }}</text>
<text class="kpi-meta">平均：¥{{ formatMoney(deliveryData.avg_fee) }}</text>
</view>
<view class="kpi-card">
<text class="kpi-label">閰嶉€佸憳鏁堢巼</text>
<text class="kpi-label">配送员效率</text>
<text class="kpi-value">{{ formatInt(deliveryData.avg_orders_per_driver) }}</text>
<text class="kpi-meta">鍗?浜?澶?/text>
<text class="kpi-meta">单/人/天</text>
</view>
<view class="kpi-card">
<text class="kpi-label">瀹㈡埛婊℃剰搴?/text>
<text class="kpi-value">{{ formatScore(deliveryData.satisfaction_rate) }}鍒?/text>
<text class="kpi-meta">杈冧笂鏈燂細{{ formatPct(deliveryData.satisfaction_growth) }}</text>
<text class="kpi-label">客户满意度</text>
<text class="kpi-value">{{ formatScore(deliveryData.satisfaction_rate) }}分</text>
<text class="kpi-meta">较上期：{{ formatPct(deliveryData.satisfaction_growth) }}</text>
</view>
</view>
<!-- 閰嶉€佹椂鏁?& 婊℃剰搴︼紙鍚堝苟鍥捐〃锛?-->
<!-- 配送时效 & 满意度（合并图表） -->
<view class="card card-full">
<view class="card-head">
<text class="card-title">閰嶉€佹椂鏁?& 婊℃剰搴?/text>
<text class="card-desc">{{ selectedPeriodText }} 路 骞冲潎閰嶉€佹椂闂?/ 婊℃剰搴﹁秼鍔?/text>
<text class="card-title">配送时效 & 满意度</text>
<text class="card-desc">{{ selectedPeriodText }} · 平均配送时间 / 满意度趋势</text>
</view>
<EChartsView class="chart-box" :option="timeChartOption" />
</view>
<!-- 閰嶉€佽垂鐢ㄥ垎鏋?-->
<!-- 配送费用分析 -->
<view class="card">
<view class="card-head">
<text class="card-title">閰嶉€佽垂鐢ㄥ垎鏋?/text>
<text class="card-desc">璐圭敤鍒嗗竷鎯呭喌</text>
<text class="card-title">配送费用分析</text>
<text class="card-desc">费用分布情况</text>
</view>
<EChartsView class="chart-box" :option="feeChartOption" />
</view>
<!-- 閰嶉€佸憳鏁堢巼鎺掕 -->
<!-- 配送员效率排行 -->
<view class="card">
<view class="card-head">
<text class="card-title">閰嶉€佸憳鏁堢巼鎺掕 TOP 10</text>
<text class="card-desc">鎸夎鍗曟暟鎺掑簭</text>
<text class="card-title">配送员效率排行 TOP 10</text>
<text class="card-desc">按订单数排序</text>
</view>
<view class="rank-scroll" @mouseenter="onRankHover(true)" @mouseleave="onRankHover(false)">
<scroll-view class="rank-scroll-inner" :scroll-y="true" :show-scrollbar="true">
@@ -109,9 +110,9 @@
<text class="rank-no">{{ d.rank }}</text>
<text class="rank-name">{{ d.name }}</text>
<view class="rank-right">
<text class="rank-val">{{ d.orders }} 鍗?/text>
<text class="rank-val">{{ d.orders }} 单</text>
<text class="chip" :class="d.rating >= 4.5 ? 'pos' : 'neg'">
猸恵{ d.rating }}
⭐{{ d.rating }}
</text>
</view>
</view>
@@ -120,7 +121,7 @@
</view>
</view>
<!-- 鐣欑櫧 -->
<!-- 留白 -->
<view style="height: 24px;"></view>
</view>
</view>
@@ -155,10 +156,10 @@ const showSidebarMenu = ref(false)
const currentPath = ref('/pages/mall/analytics/delivery-analysis')
const timePeriods = ref<Array<TimePeriod>>([
{ value: '7d', label: '7澶? },
{ value: '30d', label: '30澶? },
{ value: '90d', label: '90澶? },
{ value: '1y', label: '1骞? }
{ value: '7d', label: '7天' },
{ value: '30d', label: '30天' },
{ value: '90d', label: '90天' },
{ value: '1y', label: '1年' }
])
const deliveryData = reactive<DeliveryData>({
@@ -181,7 +182,7 @@ const _trendRows = ref<Array<UTSJSONObject>>([])
const selectedPeriodText = computed((): string => {
const p = timePeriods.value.find((t) => t.value === selectedPeriod.value)
return p ? p.label : '7澶?
return p ? p.label : '7天'
})
onLoad(() => {
@@ -268,7 +269,7 @@ async function loadDeliveryData() {
list.push({
id: r.getString('driver_id') ?? String(i),
rank: i + 1,
name: r.getString('driver_name') ?? '鏈煡',
name: r.getString('driver_name') ?? '未知',
orders: r.getNumber('orders') ?? 0,
rating: r.getNumber('rating_avg') ?? 0
})
@@ -281,7 +282,7 @@ async function loadDeliveryData() {
console.error('loadDeliveryData failed:', e)
updateTime()
buildChartOptions()
uni.showToast({ title: mapAnalyticsError(e, { fallbackMessage: '閰嶉€佸垎鏋愭暟鎹姞杞藉け璐? }), icon: 'none' })
uni.showToast({ title: mapAnalyticsError(e, { fallbackMessage: '配送分析数据加载失败' }), icon: 'none' })
}
}
@@ -313,13 +314,13 @@ function onDateRangeClear() {
function refreshData() {
loadDeliveryData()
uni.showToast({ title: '宸插埛鏂?, icon: 'success' })
uni.showToast({ title: '已刷新', icon: 'success' })
}
function exportReport() {
uni.showActionSheet({
itemList: ['瀵煎嚭Excel', '瀵煎嚭PDF', '瀵煎嚭鍥剧墖'],
success: () => uni.showToast({ title: '瀵煎嚭鎴愬姛', icon: 'success' })
itemList: ['导出Excel', '导出PDF', '导出图片'],
success: () => uni.showToast({ title: '导出成功', icon: 'success' })
})
}
@@ -332,13 +333,13 @@ function updateTime() {
function formatInt(n: number): string {
const v = isFinite(n) ? Math.round(n) : 0
if (v >= 10000) return (v / 10000).toFixed(1) + '涓?
if (v >= 10000) return (v / 10000).toFixed(1) + '万'
return v.toString()
}
function formatMoney(n: number): string {
const v = isFinite(n) ? n : 0
if (v >= 10000) return (v / 10000).toFixed(1) + '涓?
if (v >= 10000) return (v / 10000).toFixed(1) + '万'
return v.toFixed(2)
}
@@ -373,7 +374,7 @@ function buildChartOptions() {
timeChartOption.value = {
tooltip: { trigger: 'axis' },
legend: {
data: ['骞冲潎閰嶉€佹椂闂?鍒嗛挓)', '婊℃剰搴?璇勫垎)'],
data: ['平均配送时间(分钟)', '满意度(评分)'],
top: 'bottom',
itemGap: 30,
itemWidth: 16,
@@ -388,13 +389,13 @@ function buildChartOptions() {
yAxis: [
{
type: 'value',
name: '閰嶉€佹椂闂?,
name: '配送时间',
min: 0,
splitLine: { lineStyle: { color: '#e5e7eb' } }
},
{
type: 'value',
name: '婊℃剰搴?,
name: '满意度',
min: 0,
max: 5,
position: 'right',
@@ -403,7 +404,7 @@ function buildChartOptions() {
],
series: [
{
name: '骞冲潎閰嶉€佹椂闂?鍒嗛挓)',
name: '平均配送时间(分钟)',
type: 'line',
smooth: true,
symbolSize: 6,
@@ -411,7 +412,7 @@ function buildChartOptions() {
yAxisIndex: 0
},
{
name: '婊℃剰搴?璇勫垎)',
name: '满意度(评分)',
type: 'line',
smooth: true,
symbol: 'circle',
@@ -429,7 +430,7 @@ function buildChartOptions() {
yAxis: { type: 'value' },
series: [
{
name: '骞冲潎閰嶉€佽垂(鍏?',
name: '平均配送费(元)',
type: 'bar',
data: feeSeries
}
@@ -454,27 +455,27 @@ function closeMoreMenu() {
}
function handleSearch() {
uni.showToast({ title: '鎼滅储', icon: 'none' })
uni.showToast({ title: '搜索', icon: 'none' })
}
function handleNotification() {
uni.showToast({ title: '閫氱煡', icon: 'none' })
uni.showToast({ title: '通知', icon: 'none' })
}
function handleFullscreen() {
uni.showToast({ title: '鍏ㄥ睆', icon: 'none' })
uni.showToast({ title: '全屏', icon: 'none' })
}
function handleMobile() {
uni.showToast({ title: '绉诲姩绔?, icon: 'none' })
uni.showToast({ title: '移动端', icon: 'none' })
}
function handleDropdown() {
uni.showToast({ title: '涓嬫媺鑿滃崟', icon: 'none' })
uni.showToast({ title: '下拉菜单', icon: 'none' })
}
function handleSettings() {
uni.showToast({ title: '璁剧疆', icon: 'none' })
uni.showToast({ title: '设置', icon: 'none' })
}
function onRankHover(hover: boolean) {
@@ -488,7 +489,7 @@ function onRankHover(hover: boolean) {
background: #f6f7fb;
}
/* 椤甸潰甯冨眬锛氬灞忔椂渚ц竟鏍?鍐呭锛岀獎灞忔椂鍏ㄥ睆鍐呭 */
/* 页面布局：宽屏时侧边栏+内容，窄屏时全屏内容 */
.page-layout {
display: flex;
flex-direction: row !important;
@@ -500,18 +501,18 @@ function onRankHover(hover: boolean) {
min-width: 0;
display: flex;
flex-direction: column;
padding-top: 64px; /* 涓哄浐瀹氶《閮ㄥ鑸爮鐣欏嚭绌洪棿 */
padding-top: 64px; /* 为固定顶部导航栏留出空间 */
}
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
/* padding removed */ 16px 28px;
padding: 16px 16px 28px;
box-sizing: border-box;
}
/* 椤堕儴鏍?*/
/* 顶部栏 */
.topbar {
display: flex;
flex-direction: row !important;
@@ -644,7 +645,7 @@ function onRankHover(hover: boolean) {
color: #111;
}
/* 鏃堕棿缁村害 tabs */
/* 时间维度 tabs */
.tabs {
margin-top: 12px;
display: flex;
@@ -674,7 +675,7 @@ function onRankHover(hover: boolean) {
color: #fff;
}
/* KPI 缃戞牸 */
/* KPI 网格 */
.kpi-grid {
margin-top: 12px;
display: flex;
@@ -711,7 +712,7 @@ function onRankHover(hover: boolean) {
color: rgba(0,0,0,0.55);
}
/* 鍗＄墖 */
/* 卡片 */
.card {
margin-top: 12px;
background: #fff;
@@ -873,4 +874,3 @@ function onRankHover(hover: boolean) {
}
}
</style>