Polish mobile BI filters and summaries

2026-06-27 22:43:43 +08:00
parent b0caa5afcb
commit a558db5795
10 changed files with 406 additions and 349 deletions
--- a/src/modules/energy/ElectricDaily.tsx
+++ b/src/modules/energy/ElectricDaily.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from 'react';
-import { BatteryCharging, CalendarDays, ChevronRight, Plug, TrendingUp, Wallet } from 'lucide-react';
+import { BatteryCharging, CalendarDays, ChevronRight, Plug, TrendingUp, Truck, Wallet } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import TrendBadge from './TrendBadge';
 import { fetchElectricMonthly } from './api';
 import type { CustomerType, DateQuickPick, ElectricMonthGroup } from './types';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
-import { EmptyState, ErrorState, LoadingState, MetricTile } from '../../components/ui/surface';
+import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';

 const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [
  { id: 'thisWeek',  label: '本周'    },
@@ -13,26 +13,61 @@ const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [
  { id: 'last15',    label: '近 15 天' },
 ];

+type RangeMode = DateQuickPick | 'custom';
+
+function fmtYmd(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function addDays(d: Date, days: number): Date {
+  const next = new Date(d);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+
+function getQuickRange(pick: DateQuickPick): { start: string; end: string } {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  if (pick === 'thisWeek') {
+    const day = today.getDay() || 7;
+    return { start: fmtYmd(addDays(today, -(day - 1))), end: fmtYmd(today) };
+  }
+  if (pick === 'thisMonth') {
+    return { start: fmtYmd(new Date(today.getFullYear(), today.getMonth(), 1)), end: fmtYmd(today) };
+  }
+  return { start: fmtYmd(addDays(today, -14)), end: fmtYmd(today) };
+}
+
+function normalizeRange(start: string, end: string): { start: string; end: string } {
+  return start <= end ? { start, end } : { start: end, end: start };
+}
+
 export default function ElectricDaily() {
  const [customer, setCustomer] = useState<CustomerType>('lingniu');
-  const [pick, setPick] = useState<DateQuickPick>('last15');
+  const [pick, setPick] = useState<RangeMode>('last15');
+  const [dateRange, setDateRange] = useState(() => getQuickRange('last15'));
  const [months, setMonths] = useState<ElectricMonthGroup[] | null>(null);
  const [openMonths, setOpenMonths] = useState<Set<string>>(new Set());
  const [error, setError] = useState<string | null>(null);

+  const effectiveRange = useMemo(() => normalizeRange(dateRange.start, dateRange.end), [dateRange.start, dateRange.end]);
+
  useEffect(() => {
    let cancelled = false;
    setError(null);
-    fetchElectricMonthly(customer, pick)
+    const query = pick === 'custom'
+      ? { startDate: effectiveRange.start, endDate: effectiveRange.end }
+      : { range: pick };
+    fetchElectricMonthly(customer, query)
      .then(m => {
        if (cancelled) return;
        setMonths(m);
        // 默认展开最新一个月
-        if (m.length > 0) setOpenMonths(prev => prev.size > 0 ? prev : new Set([m[0].month]));
+        if (m.length > 0) setOpenMonths(new Set([m[0].month]));
      })
      .catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
    return () => { cancelled = true; };
-  }, [customer, pick]);
+  }, [customer, pick, effectiveRange.start, effectiveRange.end]);

  const toggleMonth = (m: string) => setOpenMonths(prev => {
    const next = new Set(prev);
@@ -46,14 +81,94 @@ export default function ElectricDaily() {
  const abnormalDays = useMemo(() => (months ?? []).reduce((sum, m) => sum + m.rows.filter(r => Math.abs(r.chainPct) >= 0.3).length, 0), [months]);
  const avgKwh = activeDays > 0 ? totalKwh / activeDays : 0;
  const avgPrice = totalKwh > 0 ? totalFee / totalKwh : 0;
-  const scopeLabel = QUICK_PICK_OPTIONS.find(item => item.id === pick)?.label ?? '当前时段';
+  const scopeLabel = pick === 'custom'
+    ? '自定义区间'
+    : QUICK_PICK_OPTIONS.find(item => item.id === pick)?.label ?? '当前时段';
+  const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;
  const hasFeeDetail = totalFee > 0;
  const showExternalEmpty = customer === 'external' && months !== null && totalKwh === 0;

+  const applyQuickPick = (nextPick: DateQuickPick) => {
+    setPick(nextPick);
+    setDateRange(getQuickRange(nextPick));
+  };
+
+  const updateDateRange = (field: 'start' | 'end', value: string) => {
+    if (!value) return;
+    setPick('custom');
+    setDateRange(prev => ({ ...prev, [field]: value }));
+  };
+
  return (
    <div className="flex flex-col gap-3">
+      <SurfaceCard className="p-2 md:p-3">
+        <div className="flex items-center gap-2 overflow-x-auto pb-1">
+          {QUICK_PICK_OPTIONS.map(opt => (
+            <button
+              key={opt.id}
+              onClick={() => applyQuickPick(opt.id)}
+              className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
+                pick === opt.id
+                  ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
+                  : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
+              }`}
+            >
+              {opt.label}
+            </button>
+          ))}
+          <button
+            onClick={() => setPick('custom')}
+            className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
+              pick === 'custom'
+                ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
+                : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
+            }`}
+          >
+            自定义
+          </button>
+        </div>
+
+        <div className="mt-2 grid grid-cols-2 gap-2">
+          <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
+            <span className="block text-[10px] font-black text-slate-400">开始日期</span>
+            <input
+              type="date"
+              value={dateRange.start}
+              onChange={e => updateDateRange('start', e.target.value)}
+              onInput={e => updateDateRange('start', e.currentTarget.value)}
+              className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
+            />
+          </label>
+          <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
+            <span className="block text-[10px] font-black text-slate-400">结束日期</span>
+            <input
+              type="date"
+              value={dateRange.end}
+              onChange={e => updateDateRange('end', e.target.value)}
+              onInput={e => updateDateRange('end', e.currentTarget.value)}
+              className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
+            />
+          </label>
+        </div>
+
+        <div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
+          {(['lingniu', 'external'] as const).map(c => (
+            <button
+              key={c}
+              onClick={() => setCustomer(c)}
+              className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
+                customer === c ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
+              }`}
+            >
+              <Truck size={14} />
+              {c === 'external' ? '外部车辆' : '羚牛车辆'}
+            </button>
+          ))}
+        </div>
+      </SurfaceCard>
+
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
-        <MetricTile icon={BatteryCharging} label={`${scopeLabel}充电量`} value={totalKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper="按日期汇总" />
+        <MetricTile icon={BatteryCharging} label={`${scopeLabel}充电量`} value={totalKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper={rangeText} />
        <MetricTile
          icon={Wallet}
          label="充电费用"
@@ -65,38 +180,6 @@ export default function ElectricDaily() {
        <MetricTile icon={TrendingUp} label="波动提醒" value={abnormalDays} unit="天" helper="环比超过 30% 标记" tone={abnormalDays > 0 ? 'rose' : 'slate'} />
      </div>

-      {/* 日期速选 */}
-      <div className="flex items-center gap-2 overflow-x-auto -mx-1 px-1 pb-1 snap-x">
-        {QUICK_PICK_OPTIONS.map(opt => (
-          <button
-            key={opt.id}
-            onClick={() => setPick(opt.id)}
-            className={`shrink-0 snap-start rounded-xl px-3 py-1.5 text-[11px] font-bold border transition-colors ${
-              pick === opt.id
-                ? 'bg-blue-50 text-blue-600 border-blue-200'
-                : 'bg-white text-slate-500 border-slate-200 hover:bg-slate-50'
-            }`}
-          >
-            {opt.label}
-          </button>
-        ))}
-      </div>
-
-      {/* 客户类型 */}
-      <div className="bg-slate-100 rounded-xl p-1 grid grid-cols-2 gap-1">
-        {(['lingniu', 'external'] as const).map(c => (
-          <button
-            key={c}
-            onClick={() => setCustomer(c)}
-            className={`rounded-lg py-1.5 text-[12px] font-bold transition-all ${
-              customer === c ? 'bg-white shadow-sm text-slate-800' : 'text-slate-500'
-            }`}
-          >
-            {c === 'external' ? '外部车辆' : '羚牛车辆'}
-          </button>
-        ))}
-      </div>
-
      {/* 外部车辆 数据未就绪 */}
      {showExternalEmpty && (
        <motion.div
--- a/src/modules/energy/HydrogenDaily.tsx
+++ b/src/modules/energy/HydrogenDaily.tsx
@@ -14,21 +14,56 @@ const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [
  { id: 'last15',    label: '近 15 天' },
 ];

+type RangeMode = DateQuickPick | 'custom';
+
+function fmtYmd(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function addDays(d: Date, days: number): Date {
+  const next = new Date(d);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+
+function getQuickRange(pick: DateQuickPick): { start: string; end: string } {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  if (pick === 'thisWeek') {
+    const day = today.getDay() || 7;
+    return { start: fmtYmd(addDays(today, -(day - 1))), end: fmtYmd(today) };
+  }
+  if (pick === 'thisMonth') {
+    return { start: fmtYmd(new Date(today.getFullYear(), today.getMonth(), 1)), end: fmtYmd(today) };
+  }
+  return { start: fmtYmd(addDays(today, -14)), end: fmtYmd(today) };
+}
+
+function normalizeRange(start: string, end: string): { start: string; end: string } {
+  return start <= end ? { start, end } : { start: end, end: start };
+}
+
 export default function HydrogenDaily() {
-  const [pick, setPick] = useState<DateQuickPick>('last15');
+  const [pick, setPick] = useState<RangeMode>('last15');
+  const [dateRange, setDateRange] = useState(() => getQuickRange('last15'));
  const [customer, setCustomer] = useState<CustomerType>('lingniu');
  const [expanded, setExpanded] = useState<Set<string>>(new Set());
  const [rows, setRows] = useState<HydrogenDailyRow[] | null>(null);
  const [error, setError] = useState<string | null>(null);

+  const effectiveRange = useMemo(() => normalizeRange(dateRange.start, dateRange.end), [dateRange.start, dateRange.end]);
+
  useEffect(() => {
    let cancelled = false;
    setError(null);
-    fetchHydrogenDaily(pick, customer)
+    const query = pick === 'custom'
+      ? { startDate: effectiveRange.start, endDate: effectiveRange.end }
+      : { range: pick };
+    fetchHydrogenDaily(query, customer)
      .then(r => { if (!cancelled) setRows(r); })
      .catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
    return () => { cancelled = true; };
-  }, [pick, customer]);
+  }, [pick, customer, effectiveRange.start, effectiveRange.end]);

  // 柱图：按日期升序，用于"从左到右时间流"
  const trendData = useMemo(() => (rows ? [...rows].sort((a, b) => a.date.localeCompare(b.date)) : []), [rows]);
@@ -40,7 +75,10 @@ export default function HydrogenDaily() {
    return names.size;
  }, [rows]);
  const avgKg = activeDays > 0 ? totalKg / activeDays : 0;
-  const scopeLabel = QUICK_PICK_OPTIONS.find(item => item.id === pick)?.label ?? '当前时段';
+  const scopeLabel = pick === 'custom'
+    ? '自定义区间'
+    : QUICK_PICK_OPTIONS.find(item => item.id === pick)?.label ?? '当前时段';
+  const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;
  const peakDay = trendData.reduce<HydrogenDailyRow | null>((best, item) => (!best || item.totalKg > best.totalKg ? item : best), null);
  const lowDay = trendData
    .filter(item => item.totalKg > 0)
@@ -53,47 +91,92 @@ export default function HydrogenDaily() {
    return next;
  });

+  const applyQuickPick = (nextPick: DateQuickPick) => {
+    setPick(nextPick);
+    setDateRange(getQuickRange(nextPick));
+  };
+
+  const updateDateRange = (field: 'start' | 'end', value: string) => {
+    if (!value) return;
+    setPick('custom');
+    setDateRange(prev => ({ ...prev, [field]: value }));
+  };
+
  return (
    <div className="flex flex-col gap-3">
+      <SurfaceCard className="p-2 md:p-3">
+        <div className="flex items-center gap-2 overflow-x-auto pb-1">
+          {QUICK_PICK_OPTIONS.map(opt => (
+            <button
+              key={opt.id}
+              onClick={() => applyQuickPick(opt.id)}
+              className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
+                pick === opt.id
+                  ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
+                  : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
+              }`}
+            >
+              {opt.label}
+            </button>
+          ))}
+          <button
+            onClick={() => setPick('custom')}
+            className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
+              pick === 'custom'
+                ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
+                : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
+            }`}
+          >
+            自定义
+          </button>
+        </div>
+
+        <div className="mt-2 grid grid-cols-2 gap-2">
+          <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
+            <span className="block text-[10px] font-black text-slate-400">开始日期</span>
+            <input
+              type="date"
+              value={dateRange.start}
+              onChange={e => updateDateRange('start', e.target.value)}
+              onInput={e => updateDateRange('start', e.currentTarget.value)}
+              className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
+            />
+          </label>
+          <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
+            <span className="block text-[10px] font-black text-slate-400">结束日期</span>
+            <input
+              type="date"
+              value={dateRange.end}
+              onChange={e => updateDateRange('end', e.target.value)}
+              onInput={e => updateDateRange('end', e.currentTarget.value)}
+              className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
+            />
+          </label>
+        </div>
+
+        <div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
+          {(['lingniu', 'external'] as const).map(c => (
+            <button
+              key={c}
+              onClick={() => setCustomer(c)}
+              className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
+                customer === c ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
+              }`}
+            >
+              <Truck size={14} />
+              {c === 'external' ? '外部车辆' : '羚牛车辆'}
+            </button>
+          ))}
+        </div>
+      </SurfaceCard>
+
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
-        <MetricTile icon={Fuel} label={`${scopeLabel}加氢量`} value={totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="Kg" helper="按日期汇总" />
+        <MetricTile icon={Fuel} label={`${scopeLabel}加氢量`} value={totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="Kg" helper={rangeText} />
        <MetricTile icon={Truck} label="车辆归属" value={customer === 'external' ? '外部' : '羚牛'} helper="当前筛选口径" tone="emerald" />
        <MetricTile icon={TrendingUp} label="有效天数" value={`${activeDays}/${rows?.length ?? 0}`} helper={`日均 ${avgKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} Kg`} tone="amber" />
        <MetricTile icon={Plug} label="涉及加氢站" value={stationCount} unit="站" helper="按明细站点去重" tone="slate" />
      </div>

-      {/* 日期速选 */}
-      <div className="flex items-center gap-2 overflow-x-auto -mx-1 px-1 pb-1 snap-x">
-        {QUICK_PICK_OPTIONS.map(opt => (
-          <button
-            key={opt.id}
-            onClick={() => setPick(opt.id)}
-            className={`shrink-0 snap-start rounded-xl px-3 py-1.5 text-[11px] font-bold border transition-colors ${
-              pick === opt.id
-                ? 'bg-blue-50 text-blue-600 border-blue-200'
-                : 'bg-white text-slate-500 border-slate-200 hover:bg-slate-50'
-            }`}
-          >
-            {opt.label}
-          </button>
-        ))}
-      </div>
-
-      {/* 客户类型 segmented */}
-      <div className="bg-slate-100 rounded-xl p-1 grid grid-cols-2 gap-1">
-        {(['lingniu', 'external'] as const).map(c => (
-          <button
-            key={c}
-            onClick={() => setCustomer(c)}
-            className={`rounded-lg py-1.5 text-[12px] font-bold transition-all ${
-              customer === c ? 'bg-white shadow-sm text-slate-800' : 'text-slate-500'
-            }`}
-          >
-            {c === 'external' ? '外部车辆' : '羚牛车辆'}
-          </button>
-        ))}
-      </div>
-
      {/* 外部车辆：新系统数据还没准备好 */}
      {customer === 'external' && rows !== null && totalKg === 0 && (
        <motion.div
--- a/src/modules/energy/HydrogenOverview.tsx
+++ b/src/modules/energy/HydrogenOverview.tsx
@@ -166,7 +166,7 @@ export default function HydrogenOverview() {
    <div className="flex flex-col gap-3 relative">
      {/* 顶部说明条 + 年份切换 + 刷新按钮 */}
      <div className="bg-white rounded-xl border border-slate-100 px-3 py-1.5 text-[11px] text-slate-400 flex items-center justify-between gap-2">
-        <span className="truncate">{lastRefreshAt ? `更新于 ${formatRelative(lastRefreshAt)}` : '数据自 2025-01-01 起'}</span>
+        <span className="truncate">{lastRefreshAt ? `更新于 ${formatRefreshTime(lastRefreshAt)}` : '数据自 2025-01-01 起'}</span>
        <div className="flex items-center gap-2 flex-shrink-0">
          <div className="flex items-center gap-1 bg-slate-50 rounded-lg p-0.5">
            {availableYears.map(y => {
@@ -620,6 +620,18 @@ function formatRelative(ts: number): string {
  return new Date(ts).toLocaleString('zh-CN', { hour12: false });
 }

+function formatRefreshTime(ts: number): string {
+  const exactTime = new Date(ts).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+  return `${formatRelative(ts)} · ${exactTime.replace(/\//g, '-')}`;
+}
+
 function HydrogenOverviewSkeleton() {
  return (
    <div className="flex flex-col gap-3 animate-pulse">
--- a/src/modules/energy/api.ts
+++ b/src/modules/energy/api.ts
@@ -27,8 +27,17 @@ export function fetchHydrogenOverview(year?: number, force = false): Promise<Hyd
  return fetchJson<HydrogenOverviewResponse>(`${BASE}/hydrogen/overview${q ? `?${q}` : ''}`);
 }

-export function fetchHydrogenDaily(range: DateQuickPick, customer: CustomerType): Promise<HydrogenDailyRow[]> {
-  const q = new URLSearchParams({ range, customer });
+export interface HydrogenDailyQuery {
+  range?: DateQuickPick;
+  startDate?: string;
+  endDate?: string;
+}
+
+export function fetchHydrogenDaily(query: HydrogenDailyQuery, customer: CustomerType): Promise<HydrogenDailyRow[]> {
+  const q = new URLSearchParams({ customer });
+  if (query.range) q.set('range', query.range);
+  if (query.startDate) q.set('startDate', query.startDate);
+  if (query.endDate) q.set('endDate', query.endDate);
  return fetchJson<HydrogenDailyRow[]>(`${BASE}/hydrogen/daily?${q.toString()}`);
 }

@@ -41,7 +50,10 @@ export function fetchElectricOverview(): Promise<ElectricOverviewResponse> {
  return fetchJson<ElectricOverviewResponse>(`${BASE}/electric/overview`);
 }

-export function fetchElectricMonthly(customer: CustomerType, range: DateQuickPick = 'last15'): Promise<ElectricMonthGroup[]> {
-  const q = new URLSearchParams({ customer, range });
+export function fetchElectricMonthly(customer: CustomerType, query: HydrogenDailyQuery = { range: 'last15' }): Promise<ElectricMonthGroup[]> {
+  const q = new URLSearchParams({ customer });
+  if (query.range) q.set('range', query.range);
+  if (query.startDate) q.set('startDate', query.startDate);
+  if (query.endDate) q.set('endDate', query.endDate);
  return fetchJson<ElectricMonthGroup[]>(`${BASE}/electric/monthly?${q.toString()}`);
 }