diff --git a/nginx-default.conf b/nginx-default.conf index 957d4c9..55bb063 100644 --- a/nginx-default.conf +++ b/nginx-default.conf @@ -181,7 +181,7 @@ server { } # ============ Admin API 同源反代（/rbac /order /xhs … → api.nanafa.com/admin）============ - location ~ ^/(rbac|order|customer|recharge|channel|system)/ { + location ~ ^/(rbac|order|monitor|customer|recharge|channel|system)/ { rewrite ^/(.*)$ /admin/$1 break; proxy_pass http://api.nanafa.com; proxy_http_version 1.1; diff --git a/nginx-docker.conf b/nginx-docker.conf index 0c2eb49..72a85ee 100644 --- a/nginx-docker.conf +++ b/nginx-docker.conf @@ -83,7 +83,7 @@ server { proxy_set_header X-Forwarded-Proto $scheme; } - location ~ ^/(rbac|order|customer|recharge|channel|system)/ { + location ~ ^/(rbac|order|monitor|customer|recharge|channel|system)/ { rewrite ^/(.*)$ /admin/$1 break; proxy_pass http://api.nanafa.com; proxy_http_version 1.1; diff --git a/src/api/monitor.ts b/src/api/monitor.ts new file mode 100644 index 0000000..4afe118 --- /dev/null +++ b/src/api/monitor.ts @@ -0,0 +1,206 @@ +import { axiosInstance } from '@/api/rbac' +import { resolveAdminApiPath } from '@/utils/adminApi' + +function monitorUrl(path: string): string { + return resolveAdminApiPath(path) +} + +function assertBusinessOk(body: unknown) { + if (body == null) throw new Error('空响应') + const payload = body as Record + const code = payload.code ?? payload.Code + const ok = + code === undefined || + code === null || + code === 0 || + code === 200 || + code === '0' || + code === '200' || + payload.success === true || + payload.Success === true + if (!ok) { + throw new Error( + String(payload.msg ?? payload.Msg ?? payload.message ?? payload.Message ?? '请求失败'), + ) + } +} + +function num(raw: unknown): number { + const value = Number(raw ?? 0) + return Number.isFinite(value) ? value : 0 +} + +function growth(raw: unknown): number | null { + if (raw === null || raw === undefined || raw === '') return null + const value = Number(raw) + return Number.isFinite(value) ? value : null +} + +function normalizeRegionTrend(raw: unknown) { + const bundle = (raw ?? {}) as Record + const normalizePeriod = (periodRaw: unknown) => { + const period = (periodRaw ?? {}) as Record + const labels = period.labels ?? period.Labels + const seriesRaw = period.series ?? period.Series + return { + labels: Array.isArray(labels) ? labels.map(String) : [], + series: Array.isArray(seriesRaw) + ? seriesRaw.map((item) => { + const row = item as Record + const values = row.values ?? row.Values + return { + region: String(row.region ?? row.Region ?? ''), + values: Array.isArray(values) ? values.map((v) => num(v)) : [], + } + }) + : [], + } + } + + return { + week: normalizePeriod(bundle.week ?? bundle.Week), + month: normalizePeriod(bundle.month ?? bundle.Month), + } +} + +export interface MonitorOverview { + order: { + todayCreated: number + todayCreatedGrowthPercent: number | null + total: number + totalMonthGrowthPercent: number | null + pendingPayment: number + pendingOnline: number + pendingSign: number + problematic: number + todayRevenue: number + todayRevenueGrowthPercent: number | null + } + customer: { + totalCustomers: number + totalCustomersMonthGrowthPercent: number | null + newCustomersToday: number + newCustomersGrowthPercent: number | null + onlineCustomers: number + inactiveLogin7d: number + inactiveLogin7dDelta: number + } + orderTrend7d: Array<{ label: string; count: number }> + revenueTrend7d: Array<{ label: string; revenue: number; grossProfit: number }> + regionOrderTrend: ReturnType + regionReceivableTrend: ReturnType + regionSignRates: Array<{ region: string; rate: number }> + trackRates: { + trackCompleteRate: number + trackTimelyRate: number + otdRate: number + } +} + +function normalizeOverview(raw: Record): MonitorOverview { + const order = (raw.order ?? raw.Order ?? {}) as Record + const customer = (raw.customer ?? raw.Customer ?? {}) as Record + const track = (raw.trackRates ?? raw.TrackRates ?? {}) as Record + const orderTrendRaw = raw.orderTrend7d ?? raw.OrderTrend7d + const revenueTrendRaw = raw.revenueTrend7d ?? raw.RevenueTrend7d + const signRatesRaw = raw.regionSignRates ?? raw.RegionSignRates + + return { + order: { + todayCreated: num(order.todayCreated ?? order.TodayCreated), + todayCreatedGrowthPercent: growth(order.todayCreatedGrowthPercent ?? order.TodayCreatedGrowthPercent), + total: num(order.total ?? order.Total), + totalMonthGrowthPercent: growth(order.totalMonthGrowthPercent ?? order.TotalMonthGrowthPercent), + pendingPayment: num(order.pendingPayment ?? order.PendingPayment), + pendingOnline: num(order.pendingOnline ?? order.PendingOnline), + pendingSign: num(order.pendingSign ?? order.PendingSign), + problematic: num(order.problematic ?? order.Problematic), + todayRevenue: num(order.todayRevenue ?? order.TodayRevenue), + todayRevenueGrowthPercent: growth(order.todayRevenueGrowthPercent ?? order.TodayRevenueGrowthPercent), + }, + customer: { + totalCustomers: num(customer.totalCustomers ?? customer.TotalCustomers), + totalCustomersMonthGrowthPercent: growth( + customer.totalCustomersMonthGrowthPercent ?? customer.TotalCustomersMonthGrowthPercent, + ), + newCustomersToday: num(customer.newCustomersToday ?? customer.NewCustomersToday), + newCustomersGrowthPercent: growth( + customer.newCustomersGrowthPercent ?? customer.NewCustomersGrowthPercent, + ), + onlineCustomers: num(customer.onlineCustomers ?? customer.OnlineCustomers), + inactiveLogin7d: num(customer.inactiveLogin7d ?? customer.InactiveLogin7d), + inactiveLogin7dDelta: num(customer.inactiveLogin7dDelta ?? customer.InactiveLogin7dDelta), + }, + orderTrend7d: Array.isArray(orderTrendRaw) + ? orderTrendRaw.map((item) => { + const row = item as Record + return { + label: String(row.label ?? row.Label ?? ''), + count: num(row.count ?? row.Count), + } + }) + : [], + revenueTrend7d: Array.isArray(revenueTrendRaw) + ? revenueTrendRaw.map((item) => { + const row = item as Record + return { + label: String(row.label ?? row.Label ?? ''), + revenue: num(row.revenue ?? row.Revenue), + grossProfit: num(row.grossProfit ?? row.GrossProfit), + } + }) + : [], + regionOrderTrend: normalizeRegionTrend(raw.regionOrderTrend ?? raw.RegionOrderTrend), + regionReceivableTrend: normalizeRegionTrend(raw.regionReceivableTrend ?? raw.RegionReceivableTrend), + regionSignRates: Array.isArray(signRatesRaw) + ? signRatesRaw.map((item) => { + const row = item as Record + return { + region: String(row.region ?? row.Region ?? ''), + rate: num(row.rate ?? row.Rate), + } + }) + : [], + trackRates: { + trackCompleteRate: num(track.trackCompleteRate ?? track.TrackCompleteRate), + trackTimelyRate: num(track.trackTimelyRate ?? track.TrackTimelyRate), + otdRate: num(track.otdRate ?? track.OtdRate), + }, + } +} + +/** 实时监控概览 GET /monitor/overview */ +export async function getMonitorOverview(): Promise { + const res = await axiosInstance.get(monitorUrl('/monitor/overview')) + assertBusinessOk(res.data) + const payload = res.data as Record + const data = (payload.data ?? payload.Data ?? payload) as Record + return normalizeOverview(data) +} + +export function formatMonitorNumber(value: number): string { + return Number(value || 0).toLocaleString() +} + +export function formatMonitorCurrency(value: number): string { + return `¥ ${Number(value || 0).toLocaleString(undefined, { + minimumFractionDigits: 0, + maximumFractionDigits: 0, + })}` +} + +export function formatMonitorGrowth(value: number | null | undefined): { + show: boolean + up: boolean + text: string +} { + if (value == null || Number.isNaN(Number(value))) { + return { show: false, up: true, text: '' } + } + const numValue = Number(value) + return { + show: true, + up: numValue >= 0, + text: `${Math.abs(numValue).toFixed(1)}%`, + } +} diff --git a/src/api/workplace.ts b/src/api/workplace.ts new file mode 100644 index 0000000..1f76a18 --- /dev/null +++ b/src/api/workplace.ts @@ -0,0 +1,115 @@ +import { axiosInstance } from '@/api/rbac' +import { resolveAdminApiPath } from '@/utils/adminApi' + +function orderUrl(path: string): string { + return resolveAdminApiPath(path) +} + +function assertBusinessOk(body: unknown) { + if (body == null) throw new Error('空响应') + const payload = body as Record + const code = payload.code ?? payload.Code + const ok = + code === undefined || + code === null || + code === 0 || + code === 200 || + code === '0' || + code === '200' || + payload.success === true || + payload.Success === true + if (!ok) { + throw new Error( + String(payload.msg ?? payload.Msg ?? payload.message ?? payload.Message ?? '请求失败'), + ) + } +} + +function unwrapData(body: unknown): T { + assertBusinessOk(body) + const payload = body as Record + return (payload.data ?? payload.Data ?? body) as T +} + +export interface OrderWorkplaceStats { + total: number + counts: Record + todayCreated: number + yesterdayCreated: number + dayOverDayGrowthPercent: number | null + pendingShip: number + shipped: number + pendingOnline: number + problematic: number +} + +export interface OrderWorkplaceTrendPoint { + label: string + forecastCount: number + shippedCount: number +} + +export interface OrderWorkplaceTrend { + dimension: string + points: OrderWorkplaceTrendPoint[] +} + +function normalizeStats(raw: Record): OrderWorkplaceStats { + const countsRaw = raw.counts ?? raw.Counts + return { + total: Number(raw.total ?? raw.Total ?? 0) || 0, + counts: + typeof countsRaw === 'object' && countsRaw !== null + ? (countsRaw as Record) + : {}, + todayCreated: Number(raw.todayCreated ?? raw.TodayCreated ?? 0) || 0, + yesterdayCreated: Number(raw.yesterdayCreated ?? raw.YesterdayCreated ?? 0) || 0, + dayOverDayGrowthPercent: + raw.dayOverDayGrowthPercent ?? raw.DayOverDayGrowthPercent ?? null, + pendingShip: Number(raw.pendingShip ?? raw.PendingShip ?? 0) || 0, + shipped: Number(raw.shipped ?? raw.Shipped ?? 0) || 0, + pendingOnline: Number(raw.pendingOnline ?? raw.PendingOnline ?? 0) || 0, + problematic: Number(raw.problematic ?? raw.Problematic ?? 0) || 0, + } +} + +function normalizeTrend(raw: Record): OrderWorkplaceTrend { + const pointsRaw = raw.points ?? raw.Points + const points = Array.isArray(pointsRaw) + ? pointsRaw.map((item) => { + const row = item as Record + return { + label: String(row.label ?? row.Label ?? ''), + forecastCount: Number(row.forecastCount ?? row.ForecastCount ?? 0) || 0, + shippedCount: Number(row.shippedCount ?? row.ShippedCount ?? 0) || 0, + } + }) + : [] + + return { + dimension: String(raw.dimension ?? raw.Dimension ?? 'day'), + points, + } +} + +/** 工作台订单统计 GET /order/workplace-stats */ +export async function getOrderWorkplaceStats(): Promise { + const res = await axiosInstance.get(orderUrl('/order/workplace-stats')) + const data = unwrapData>(res.data) + return normalizeStats(data) +} + +/** 工作台订单趋势 GET /order/workplace-trend */ +export async function getOrderWorkplaceTrend(params: { + dimension: 'day' | 'week' | 'month' + count?: number +}): Promise { + const res = await axiosInstance.get(orderUrl('/order/workplace-trend'), { + params: { + dimension: params.dimension, + count: params.count, + }, + }) + const data = unwrapData>(res.data) + return normalizeTrend(data) +} diff --git a/src/views/home/monitor/index.vue b/src/views/home/monitor/index.vue index dd74f76..bf96343 100644 --- a/src/views/home/monitor/index.vue +++ b/src/views/home/monitor/index.vue @@ -6,6 +6,7 @@
+ - +
-
{{ $t('monitor.logistics.stat.todayOrders') }}
-
- -
-
-
1,896
-
-
- - 12.5% {{ $t('monitor.logistics.vsYesterday') }} -
-
-
- - - - - -
-
-
{{ $t('monitor.logistics.stat.historicalOrders') }}
-
- -
-
-
128,460
-
-
- - 2.1% {{ $t('monitor.logistics.vsLastMonth') }} -
-
-
- - - - - -
-
-
{{ $t('monitor.logistics.stat.pendingPayment') }}
-
- -
-
-
56
-
-
- - 4.0% {{ $t('monitor.logistics.vsYesterday') }} -
-
-
- - - - - -
-
-
{{ $t('monitor.logistics.stat.pendingOnline') }}
-
- -
-
-
312
-
-
- - 3.6% {{ $t('monitor.logistics.vsYesterday') }} -
-
-
- - - - - -
-
-
{{ $t('monitor.logistics.stat.pendingSign') }}
-
- -
-
-
892
-
-
- - 1.2% {{ $t('monitor.logistics.vsYesterday') }} -
-
-
- - - - - -
-
-
{{ $t('monitor.logistics.stat.orderExceptions') }}
-
- -
-
-
23
-
-
- - 8.2% {{ $t('monitor.logistics.vsYesterday') }} -
-
-
- - - - - -
-
-
{{ $t('monitor.logistics.stat.todayRevenue') }}
+
{{ $t(card.labelKey) }}
-
¥ 126,390
-
-
- - 18.7% {{ $t('monitor.logistics.vsYesterday') }} +
{{ card.value }}
+
+
+ + + {{ card.growth.text }} {{ $t(card.compareKey) }}
@@ -173,77 +63,41 @@ - +
-
{{ $t('monitor.logistics.stat.totalCustomers') }}
-
+
{{ $t(card.labelKey) }}
+
-
12,480
+
{{ card.value }}
-
- - 1.2% {{ $t('monitor.logistics.vsLastMonth') }} +
+ + + {{ card.growth.text }} {{ $t(card.compareKey) }}
-
-
- - - - - -
-
-
{{ $t('monitor.logistics.stat.newCustomers') }}
-
- +
+ {{ $t(card.hintKey) }}
-
-
86
-
-
- - 6.2% {{ $t('monitor.logistics.vsYesterday') }} -
-
{{ $t('monitor.logistics.hint.newCustomersToday') }}
-
-
- - - - - -
-
-
{{ $t('monitor.logistics.stat.onlineCustomers') }}
-
- -
-
-
342
-
-
{{ $t('monitor.logistics.hint.onlineRealtime') }}
-
-
- - - - - -
-
-
{{ $t('monitor.logistics.stat.inactiveLogin7d') }}
-
- -
-
-
156
-
-
{{ $t('monitor.logistics.hint.inactiveLogin7d') }}
-
{{ $t('monitor.logistics.hint.inactiveLogin7dCompare') }}
+
{{ $t(card.extraHintKey) }}
 @@ -365,6 +219,7 @@ +
@@ -375,11 +230,155 @@ import * as echarts from 'echarts'; import { modifyAlpha } from 'zrender/lib/tool/color'; import { useI18n } from 'vue-i18n'; + import { + getMonitorOverview, + formatMonitorNumber, + formatMonitorCurrency, + formatMonitorGrowth, + type MonitorOverview, + } from '@/api/monitor'; defineOptions({ name: 'Monitor' }); const { t } = useI18n(); + const overview = ref(null); + const overviewLoading = ref(true); + + async function loadOverview() { + overviewLoading.value = true; + try { + overview.value = await getMonitorOverview(); + } catch { + overview.value = null; + } finally { + overviewLoading.value = false; + await nextTick(); + refreshChartsForTab(monitorTab.value); + } + } + + function refreshChartsForTab(tab: 'customer' | 'order' | 'track') { + if (tab === 'order') ensureOrderLineCharts(); + if (tab === 'track') ensureTrackCharts(); + if (tab === 'customer') ensureCustomerCharts(); + nextTick(() => onResize()); + } + + const orderStatCards = computed(() => { + const order = overview.value?.order; + return [ + { + key: 'todayOrders', + labelKey: 'monitor.logistics.stat.todayOrders', + value: formatMonitorNumber(order?.todayCreated ?? 0), + growth: formatMonitorGrowth(order?.todayCreatedGrowthPercent), + compareKey: 'monitor.logistics.vsYesterday', + warning: false, + icon: 'calendar', + }, + { + key: 'historicalOrders', + labelKey: 'monitor.logistics.stat.historicalOrders', + value: formatMonitorNumber(order?.total ?? 0), + growth: formatMonitorGrowth(order?.totalMonthGrowthPercent), + compareKey: 'monitor.logistics.vsLastMonth', + warning: false, + icon: 'history', + }, + { + key: 'pendingPayment', + labelKey: 'monitor.logistics.stat.pendingPayment', + value: formatMonitorNumber(order?.pendingPayment ?? 0), + growth: { show: false, up: true, text: '' }, + compareKey: 'monitor.logistics.vsYesterday', + warning: true, + icon: 'stamp', + }, + { + key: 'pendingOnline', + labelKey: 'monitor.logistics.stat.pendingOnline', + value: formatMonitorNumber(order?.pendingOnline ?? 0), + growth: { show: false, up: true, text: '' }, + compareKey: 'monitor.logistics.vsYesterday', + warning: false, + icon: 'send', + }, + { + key: 'pendingSign', + labelKey: 'monitor.logistics.stat.pendingSign', + value: formatMonitorNumber(order?.pendingSign ?? 0), + growth: { show: false, up: true, text: '' }, + compareKey: 'monitor.logistics.vsYesterday', + warning: false, + icon: 'check', + }, + { + key: 'orderExceptions', + labelKey: 'monitor.logistics.stat.orderExceptions', + value: formatMonitorNumber(order?.problematic ?? 0), + growth: { show: false, up: false, text: '' }, + compareKey: 'monitor.logistics.vsYesterday', + warning: true, + icon: 'exception', + }, + { + key: 'todayRevenue', + labelKey: 'monitor.logistics.stat.todayRevenue', + value: formatMonitorCurrency(order?.todayRevenue ?? 0), + growth: formatMonitorGrowth(order?.todayRevenueGrowthPercent), + compareKey: 'monitor.logistics.vsYesterday', + warning: false, + icon: 'chart', + }, + ]; + }); + + const customerStatCards = computed(() => { + const customer = overview.value?.customer; + return [ + { + key: 'totalCustomers', + labelKey: 'monitor.logistics.stat.totalCustomers', + value: formatMonitorNumber(customer?.totalCustomers ?? 0), + growth: formatMonitorGrowth(customer?.totalCustomersMonthGrowthPercent), + compareKey: 'monitor.logistics.vsLastMonth', + warning: false, + icon: 'group', + }, + { + key: 'newCustomers', + labelKey: 'monitor.logistics.stat.newCustomers', + value: formatMonitorNumber(customer?.newCustomersToday ?? 0), + growth: formatMonitorGrowth(customer?.newCustomersGrowthPercent), + compareKey: 'monitor.logistics.vsYesterday', + warning: false, + icon: 'add', + hintKey: 'monitor.logistics.hint.newCustomersToday', + }, + { + key: 'onlineCustomers', + labelKey: 'monitor.logistics.stat.onlineCustomers', + value: formatMonitorNumber(customer?.onlineCustomers ?? 0), + growth: { show: false, up: true, text: '' }, + warning: false, + icon: 'online', + hintKey: 'monitor.logistics.hint.onlineRealtime', + hintAccent: true, + }, + { + key: 'inactiveLogin7d', + labelKey: 'monitor.logistics.stat.inactiveLogin7d', + value: formatMonitorNumber(customer?.inactiveLogin7d ?? 0), + growth: { show: false, up: true, text: '' }, + warning: true, + icon: 'clock', + hintKey: 'monitor.logistics.hint.inactiveLogin7d', + extraHintKey: 'monitor.logistics.hint.inactiveLogin7dCompare', + }, + ]; + }); + const LINE_KEYS = ['us', 'eu', 'sea', 'au', 'jp', 'uk'] as const; type LineKey = (typeof LINE_KEYS)[number]; @@ -449,7 +448,6 @@ ); function buildSignRateSeries(): { categories: string[]; values: number[] } { - const days = filterSignDays.value; const lineKey = filterLine.value; const keys: LineKey[] = !lineKey || lineKey === 'all' @@ -458,16 +456,16 @@ ? [lineKey as LineKey] : [...LINE_KEYS]; - const dayFactor = 1 + (days - 7) * 0.0045; + const rateMap = new Map( + (overview.value?.regionSignRates ?? []).map((item) => [item.region, item.rate]), + ); const categories: string[] = []; const values: number[] = []; keys.forEach((key) => { - const raw = baseSignRates[key] * dayFactor + (keys.length === 1 ? 0.3 : 0); - const v = Math.min(100, Math.max(0, Number(raw.toFixed(1)))); categories.push(t(`monitor.logistics.line.${key}`)); - values.push(v); + values.push(Number(rateMap.get(key) ?? 0)); }); return { categories, values }; @@ -538,15 +536,17 @@ return LINE_KEYS.includes(v as LineKey) ? [v as LineKey] : [...LINE_KEYS]; } + function getPiePassRate(metric: PieMetricKey): number { + const rates = overview.value?.trackRates; + if (!rates) return 0; + if (metric === 'complete') return rates.trackCompleteRate; + if (metric === 'timely') return rates.trackTimelyRate; + return rates.otdRate; + } + function averagePieMetric(metric: PieMetricKey): number { - const keys = getActiveLineKeysForPie(); - const periodMul = piePeriod.value === 'month' ? 1.012 : 0.992; - let sum = 0; - keys.forEach((k) => { - sum += pieMetricBase[k][metric]; - }); - const raw = (sum / keys.length) * periodMul; - return Math.min(99.5, Math.max(70, Number(raw.toFixed(1)))); + const pass = getPiePassRate(metric); + return Math.min(99.5, Math.max(0, Number(pass.toFixed(1)))); } function buildPieChartOption(passColor: string, metric: PieMetricKey) { @@ -670,35 +670,52 @@ return orders.map((o) => Math.round(o * unitPrice)); } + function getRegionTrendBundle(kind: 'order' | 'receivable', period: 'week' | 'month') { + const bundle = + kind === 'order' ? overview.value?.regionOrderTrend : overview.value?.regionReceivableTrend; + return period === 'month' ? bundle?.month : bundle?.week; + } + function renderCustomerTrendCharts() { const period = customerTrendPeriod.value; - const categories = buildCustomerPeriodLabels(period); + const orderTrend = getRegionTrendBundle('order', period); + const receivableTrend = getRegionTrendBundle('receivable', period); + const categories = + orderTrend?.labels?.length + ? orderTrend.labels + : buildCustomerPeriodLabels(period); const keys = getActiveCustomerLineKeys(); const colors = getLineTrendColors(); const axisLine = readCssVar('--color-border-2', '#e5e6eb'); const text2 = readCssVar('--color-text-2', '#86909c'); - const orderSeries = keys.map((key) => ({ - name: t(`monitor.logistics.line.${key}`), - type: 'line' as const, - smooth: true, - symbol: 'circle', - symbolSize: keys.length > 2 ? 4 : 6, - data: buildMockOrderSeries(key, period, categories.length), - itemStyle: { color: colors[LINE_KEYS.indexOf(key) % colors.length] }, - lineStyle: { width: keys.length > 2 ? 2 : 2.5 }, - })); + const orderSeries = keys.map((key) => { + const matched = orderTrend?.series?.find((item) => item.region === key); + return { + name: t(`monitor.logistics.line.${key}`), + type: 'line' as const, + smooth: true, + symbol: 'circle', + symbolSize: keys.length > 2 ? 4 : 6, + data: matched?.values?.length ? matched.values : Array(categories.length).fill(0), + itemStyle: { color: colors[LINE_KEYS.indexOf(key) % colors.length] }, + lineStyle: { width: keys.length > 2 ? 2 : 2.5 }, + }; + }); - const receivableSeries = keys.map((key) => ({ - name: t(`monitor.logistics.line.${key}`), - type: 'line' as const, - smooth: true, - symbol: 'circle', - symbolSize: keys.length > 2 ? 4 : 6, - data: buildMockReceivableSeries(key, period, categories.length), - itemStyle: { color: colors[LINE_KEYS.indexOf(key) % colors.length] }, - lineStyle: { width: keys.length > 2 ? 2 : 2.5 }, - })); + const receivableSeries = keys.map((key) => { + const matched = receivableTrend?.series?.find((item) => item.region === key); + return { + name: t(`monitor.logistics.line.${key}`), + type: 'line' as const, + smooth: true, + symbol: 'circle', + symbolSize: keys.length > 2 ? 4 : 6, + data: matched?.values?.length ? matched.values : Array(categories.length).fill(0), + itemStyle: { color: colors[LINE_KEYS.indexOf(key) % colors.length] }, + lineStyle: { width: keys.length > 2 ? 2 : 2.5 }, + }; + }); const grid = { left: '3%', right: '3%', bottom: keys.length > 1 ? '14%' : '3%', top: '10%', containLabel: true }; @@ -774,34 +791,37 @@ function ensureOrderLineCharts() { const primary = readCssVar('--app-primary-color', '#2D8C8C'); const axisLine = readCssVar('--color-border-2', '#e5e6eb'); - const dayLabels = [ - t('monitor.logistics.axis.d1'), - t('monitor.logistics.axis.d2'), - t('monitor.logistics.axis.d3'), - t('monitor.logistics.axis.d4'), - t('monitor.logistics.axis.d5'), - t('monitor.logistics.axis.d6'), - t('monitor.logistics.axis.today'), - ]; + const orderTrend = overview.value?.orderTrend7d ?? []; + const revenueTrend = overview.value?.revenueTrend7d ?? []; + const dayLabels = orderTrend.length + ? orderTrend.map((item) => item.label) + : revenueTrend.map((item) => item.label); + const orderValues = orderTrend.length + ? orderTrend.map((item) => item.count) + : []; + const revenueValues = revenueTrend.map((item) => item.revenue); + const grossValues = revenueTrend.map((item) => item.grossProfit); if (orderChartRef.value) { if (!orderChartInstance) { orderChartInstance = echarts.init(orderChartRef.value); - orderChartInstance.setOption({ + } + orderChartInstance.setOption( + { grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', - data: dayLabels, + data: dayLabels.length ? dayLabels : [t('workplace.record.nodata')], axisLine: { lineStyle: { color: axisLine } }, }, - yAxis: { type: 'value', axisLine: { lineStyle: { color: axisLine } } }, + yAxis: { type: 'value', minInterval: 1, axisLine: { lineStyle: { color: axisLine } } }, series: [ { name: t('monitor.logistics.series.orders'), type: 'line', smooth: true, - data: [1230, 1350, 1420, 1580, 1660, 1790, 1896], + data: orderValues, itemStyle: { color: primary }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -811,16 +831,19 @@ }, }, ], - }); - } + }, + { notMerge: true }, + ); } if (profitChartRef.value) { if (!profitChartInstance) { profitChartInstance = echarts.init(profitChartRef.value); - const revenueColor = '#00B42A'; - const grossColor = '#FF7D00'; - profitChartInstance.setOption({ + } + const revenueColor = '#00B42A'; + const grossColor = '#FF7D00'; + profitChartInstance.setOption( + { grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, tooltip: { trigger: 'axis' }, legend: { @@ -829,7 +852,7 @@ }, xAxis: { type: 'category', - data: dayLabels, + data: dayLabels.length ? dayLabels : [t('workplace.record.nodata')], axisLine: { lineStyle: { color: axisLine } }, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: axisLine } } }, @@ -838,19 +861,20 @@ name: t('monitor.logistics.series.revenue'), type: 'line', smooth: true, - data: [85600, 92300, 98700, 105200, 111500, 118900, 126390], + data: revenueValues, itemStyle: { color: revenueColor }, }, { name: t('monitor.logistics.series.grossProfit'), type: 'line', smooth: true, - data: [21400, 23000, 24600, 26200, 27800, 29600, 31500], + data: grossValues, itemStyle: { color: grossColor }, }, ], - }); - } + }, + { notMerge: true }, + ); } orderChartInstance?.resize(); @@ -873,6 +897,7 @@ layoutResizeObserver = new ResizeObserver(() => onResize()); layoutResizeObserver.observe(logisticsMonitorRoot.value); } + await loadOverview(); }); function disposeOrderCharts() { diff --git a/src/views/home/workplace/components/data-panel.vue b/src/views/home/workplace/components/data-panel.vue index fd9344b..ed55840 100644 --- a/src/views/home/workplace/components/data-panel.vue +++ b/src/views/home/workplace/components/data-panel.vue @@ -1,169 +1,190 @@ - + diff --git a/src/views/home/workplace/components/order-analysis.vue b/src/views/home/workplace/components/order-analysis.vue index 8ef464a..d7acf27 100644 --- a/src/views/home/workplace/components/order-analysis.vue +++ b/src/views/home/workplace/components/order-analysis.vue @@ -7,97 +7,81 @@ }" > - + + @@ -243,8 +228,14 @@ onMounted(() => { gap: 12px; } +.order-analysis-loading { + display: flex; + justify-content: center; + align-items: center; + min-height: 360px; +} + .order-analysis-chart { min-height: 360px; } - diff --git a/src/views/home/workplace/locale/en-US.ts b/src/views/home/workplace/locale/en-US.ts index 1f4f9a5..7f39d65 100644 --- a/src/views/home/workplace/locale/en-US.ts +++ b/src/views/home/workplace/locale/en-US.ts @@ -4,12 +4,18 @@ export default { 'workplace.balance': 'Balance (CNY)', 'workplace.order.pending': 'Pending', 'workplace.order.pendingRenewal': 'Renewal Order', - 'workplace.onlineContent': 'Online Content', - 'workplace.putIn': 'Put In', + 'workplace.onlineContent': 'New Orders Today', + 'workplace.putIn': 'Pending Shipment', 'workplace.pendingOnline': 'Pending Online', - 'workplace.newDay': 'Daily Additional Comments', + 'workplace.newDay': 'Shipped', 'workplace.problematic': 'Problematic', - 'workplace.newFromYesterday': 'New From Yesterday', + 'workplace.newFromYesterday': 'Day-over-Day Growth', + 'workplace.orderAnalysis.title': 'Order Analysis', + 'workplace.orderAnalysis.day': 'Day', + 'workplace.orderAnalysis.week': 'Week', + 'workplace.orderAnalysis.month': 'Month', + 'workplace.orderAnalysis.forecast': 'New Orders', + 'workplace.orderAnalysis.shipped': 'Shipped Orders', 'workplace.minute': 'Min', 'workplace.docs': 'Documents', 'workplace.docs.productOverview': 'Product Overview', @@ -36,7 +42,7 @@ export default { 'workplace.popularContent.image': 'image', 'workplace.popularContent.video': 'video', 'workplace.categoriesPercent': 'Categories Percent', - 'workplace.pecs': 'pecs', + 'workplace.pecs': 'orders', 'workplace.noticePopup.markRead': 'Mark as read', 'workplace.noticePopup.close': 'Close', 'workplace.noticePopup.readFailed': 'Could not mark as read. Please try again.', diff --git a/src/views/home/workplace/locale/zh-CN.ts b/src/views/home/workplace/locale/zh-CN.ts index 001b62f..f0ec827 100644 --- a/src/views/home/workplace/locale/zh-CN.ts +++ b/src/views/home/workplace/locale/zh-CN.ts @@ -4,12 +4,18 @@ export default { 'workplace.balance': '余额（元）', 'workplace.order.pending': '待支付', 'workplace.order.pendingRenewal': '待续费订单', - 'workplace.onlineContent': '今日预报订单', + 'workplace.onlineContent': '今日新增订单', 'workplace.putIn': '待发货', 'workplace.pendingOnline': '待上网', 'workplace.newDay': '已发货', 'workplace.problematic': '问题件', 'workplace.newFromYesterday': '较昨日新增', + 'workplace.orderAnalysis.title': '订单分析', + 'workplace.orderAnalysis.day': '日', + 'workplace.orderAnalysis.week': '周', + 'workplace.orderAnalysis.month': '月', + 'workplace.orderAnalysis.forecast': '新增订单', + 'workplace.orderAnalysis.shipped': '发货订单', 'workplace.minute': '分钟', 'workplace.docs': '帮助文档', 'workplace.docs.productOverview': '产品概要', diff --git a/vite.config.ts b/vite.config.ts index e7dbbab..8e77be5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -45,6 +45,11 @@ export default defineConfig(({ mode }) => { changeOrigin: true, secure: false, }, + '/monitor': { + target: 'http://api.nanafa.com/admin', + changeOrigin: true, + secure: false, + }, '/customer': { target: 'http://api.nanafa.com/admin', changeOrigin: true,