chore: update mock data from April to June 2026, extend daily range to 9 days
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

Replace all prototype data across Overall/Efficiency/Users views with
June 2026 data (06/01-06/09), add fabricated entries for 06/01-06/07
alongside real 06/08-06/09 data, and make weekly trend fluctuate for
better demo visuals.
This commit is contained in:
kkfluous
2026-06-09 13:29:03 +08:00
parent f265db46ca
commit c5f422a464
5 changed files with 117 additions and 125 deletions

View File

@@ -27,7 +27,7 @@ export function Header({ title, onMenuClick }: { title: string; onMenuClick?: ()
<div className="flex items-center space-x-4 text-slate-500 shrink-0"> <div className="flex items-center space-x-4 text-slate-500 shrink-0">
<div className="hidden sm:flex text-xs text-indigo-600 bg-indigo-50 border border-indigo-100 px-3 py-1.5 rounded-full font-medium items-center shadow-sm"> <div className="hidden sm:flex text-xs text-indigo-600 bg-indigo-50 border border-indigo-100 px-3 py-1.5 rounded-full font-medium items-center shadow-sm">
<span className="w-2 h-2 rounded-full bg-indigo-500 mr-2 animate-pulse" /> <span className="w-2 h-2 rounded-full bg-indigo-500 mr-2 animate-pulse" />
周期: 4/18 - 4/29 周期: 06/01 - 06/09
</div> </div>
<button className="hover:text-slate-700 transition-colors relative ml-2 p-2 hover:bg-slate-100 rounded-full"> <button className="hover:text-slate-700 transition-colors relative ml-2 p-2 hover:bg-slate-100 rounded-full">
<Bell className="w-5 h-5" /> <Bell className="w-5 h-5" />

View File

@@ -91,8 +91,8 @@ export function Sidebar({ currentView, setCurrentView, mobileOpen = false, onMob
<div className="p-4 border-t border-white/5 bg-slate-900 z-10 shrink-0"> <div className="p-4 border-t border-white/5 bg-slate-900 z-10 shrink-0">
<div className="bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700/50 p-4 rounded-xl text-xs relative overflow-hidden shadow-inner"> <div className="bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700/50 p-4 rounded-xl text-xs relative overflow-hidden shadow-inner">
<div className="absolute top-0 right-0 w-16 h-16 bg-indigo-500/10 rounded-full blur-xl -mr-4 -mt-4"></div> <div className="absolute top-0 right-0 w-16 h-16 bg-indigo-500/10 rounded-full blur-xl -mr-4 -mt-4"></div>
<p className="text-slate-400 mb-1.5 font-medium"> ()</p> <p className="text-slate-400 mb-1.5 font-medium"> ()</p>
<p className="font-bold text-slate-200 text-sm">26418 - 429</p> <p className="font-bold text-slate-200 text-sm">2661 - 69</p>
<div className="mt-3 flex items-center text-[10px] text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded w-fit border border-emerald-400/20"> <div className="mt-3 flex items-center text-[10px] text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded w-fit border border-emerald-400/20">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5"></span> <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5"></span>

View File

@@ -4,26 +4,23 @@ import { StatCard } from '../ui/StatCard';
import { Activity, Target, TrendingUp, Zap, Clock, Radio, AlertCircle } from 'lucide-react'; import { Activity, Target, TrendingUp, Zap, Clock, Radio, AlertCircle } from 'lucide-react';
const stationData = [ const stationData = [
{ name: '嘉兴嘉', 消耗: 420, 剩余: 580, 上限: 1000 }, { name: '嘉兴嘉', 消耗: 450, 剩余: 550, 上限: 1000 },
{ name: '嘉兴嘉锦', 消耗: 380, 剩余: 420, 上限: 800 }, { name: '嘉燃经开', 消耗: 120, 剩余: 380, 上限: 500 },
{ name: '如皋华神', 消耗: 160, 剩余: 340, 上限: 500 }, { name: '桐乡绿能', 消耗: 120, 剩余: 380, 上限: 500 },
{ name: '花桥中石油', 消耗: 80, 剩余: 220, 上限: 300 }, { name: '嘉兴嘉燃', 消耗: 90, 剩余: 410, 上限: 500 },
{ name: '常熟嘉化', 消耗: 45, 剩余: 155, 上限: 200 } { name: '如皋华神', 消耗: 20, 剩余: 280, 上限: 300 }
]; ];
const stationGrowth = [ const stationGrowth = [
{ date: '4/18', 嘉燃: 10, 嘉锦: 3, 其他: 0 }, { date: '06/01', 嘉燃: 3, 嘉锦: 3, 其他: 1 },
{ date: '4/19', 嘉燃: 6, 嘉锦: 3, 其他: 0 }, { date: '06/02', 嘉燃: 2, 嘉锦: 2, 其他: 1 },
{ date: '4/20', 嘉燃: 7, 嘉锦: 0, 其他: 0 }, { date: '06/03', 嘉燃: 4, 嘉锦: 3, 其他: 1 },
{ date: '4/21', 嘉燃: 5, 嘉锦: 3, 其他: 0 }, { date: '06/04', 嘉燃: 2, 嘉锦: 3, 其他: 0 },
{ date: '4/22', 嘉燃: 7, 嘉锦: 3, 其他: 1 }, { date: '06/05', 嘉燃: 3, 嘉锦: 4, 其他: 2 },
{ date: '4/23', 嘉燃: 7, 嘉锦: 15, 其他: 7 }, { date: '06/06', 嘉燃: 3, 嘉锦: 3, 其他: 2 },
{ date: '4/24', 嘉燃: 9, 嘉锦: 14, 其他: 6 }, { date: '06/07', 嘉燃: 1, 嘉锦: 2, 其他: 1 },
{ date: '4/25', 嘉燃: 6, 嘉锦: 12, 其他: 4 }, { date: '06/08', 嘉燃: 5, 嘉锦: 3, 其他: 2 },
{ date: '4/26', 嘉燃: 6, 嘉锦: 13, 其他: 3 }, { date: '06/09', 嘉燃: 2, 嘉锦: 3, 其他: 0 },
{ date: '4/27', 嘉燃: 6, 嘉锦: 13, 其他: 3 },
{ date: '4/28', 嘉燃: 7, 嘉锦: 13, 其他: 2 },
{ date: '4/29', 嘉燃: 7, 嘉锦: 13, 其他: 2 },
]; ];
export function EfficiencyView() { export function EfficiencyView() {
@@ -39,37 +36,37 @@ export function EfficiencyView() {
<span className="ml-3 px-2 py-0.5 rounded text-[10px] bg-indigo-200 text-indigo-800 font-bold tracking-wider">PHASE 2</span> <span className="ml-3 px-2 py-0.5 rounded text-[10px] bg-indigo-200 text-indigo-800 font-bold tracking-wider">PHASE 2</span>
</h4> </h4>
<p className="text-sm text-indigo-700 mt-1.5 leading-relaxed"> <p className="text-sm text-indigo-700 mt-1.5 leading-relaxed">
<span className="font-semibold text-indigo-900 border-b border-indigo-200"></span>线<b></b><span className="font-semibold text-indigo-900 border-b border-indigo-200"></span> <span className="font-semibold text-indigo-900 border-b border-indigo-200"></span>线<b></b><span className="font-semibold text-indigo-900 border-b border-indigo-200"></span>"数字孪生式"
</p> </p>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<StatCard <StatCard
title="全网综合日均加注量预估" title="全网综合日均加注量预估"
value="1,085 kg" value="800 kg"
subValue="主要覆盖嘉兴、南通等核心枢纽网的测算值" subValue="主要覆盖嘉兴、南通等核心枢纽网的测算值"
icon={Activity} icon={Activity}
highlight highlight
/> />
<StatCard <StatCard
title="全网各站总负荷上限满载" title="全网各站总负荷上限满载"
value="2,800 kg" value="2,800 kg"
subValue="所有加注站理论最高吞吐物理上限汇总" subValue="所有加注站理论最高吞吐物理上限汇总"
icon={Zap} icon={Zap}
/> />
<StatCard <StatCard
title="系统优化全站有效工时" title="系统优化全站有效工时"
value="~4.5 小时" value="~4.2 小时"
subValue="主要由预约时限测算出的无效排队节省时间" subValue="主要由预约时限测算出的无效排队节省时间"
icon={Clock} icon={Clock}
trend={-45} trend={-42}
/> />
<StatCard <StatCard
title="平均承载饱和度 (预估)" title="平均承载饱和度 (预估)"
value="38.5 %" value="28.6 %"
subValue="预留了充足的峰值缓冲池与调配拓展空间" subValue="预留了充足的峰值缓冲池与调配拓展空间"
icon={Target} icon={Target}
/> />
</div> </div>
@@ -78,11 +75,11 @@ export function EfficiencyView() {
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<div> <div>
<h3 className="text-lg font-bold text-slate-800"></h3> <h3 className="text-lg font-bold text-slate-800"></h3>
<p className="text-sm text-slate-500 mt-1"></p> <p className="text-sm text-slate-500 mt-1">"信息流"</p>
</div> </div>
<div className="flex bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-lg text-sm font-semibold items-center border border-indigo-100"> <div className="flex bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-lg text-sm font-semibold items-center border border-indigo-100">
<TrendingUp className="w-4 h-4 mr-1.5" /> <TrendingUp className="w-4 h-4 mr-1.5" />
线
</div> </div>
</div> </div>
<div className="h-[300px] w-full"> <div className="h-[300px] w-full">

View File

@@ -4,70 +4,67 @@ import { StatCard } from '../ui/StatCard';
import { Calendar, Network, MapPin, UserCheck } from 'lucide-react'; import { Calendar, Network, MapPin, UserCheck } from 'lucide-react';
const weeklyTrend = [ const weeklyTrend = [
{ name: '3/16-3/20', 总量: 17 }, { name: '05/03-05/09', 总量: 153 },
{ name: '3/21-3/27', 总量: 47 }, { name: '05/10-05/16', 总量: 118 },
{ name: '3/28-4/6', 总量: 55 }, { name: '05/17-05/23', 总量: 137 },
{ name: '4/7-4/11', 总量: 40 }, { name: '05/24-05/30', 总量: 95 },
{ name: '4/12-4/17', 总量: 49 }, { name: '05/31-06/06', 总量: 122 },
{ name: '4/18-4/24', 总量: 106 }, { name: '06/07-06/09', 总量: 65 },
{ name: '4/25-4/29', 总量: 110 },
]; ];
const dailyBreakdown = [ const dailyBreakdown = [
{ date: '4/18', 嘉燃: 10, 嘉锦: 3, 如皋: 0, 其他: 0 }, { date: '06/01', 嘉燃: 3, 嘉锦: 3, 如皋: 1, 其他: 0 },
{ date: '4/19', 嘉燃: 6, 嘉锦: 3, 如皋: 0, 其他: 0 }, { date: '06/02', 嘉燃: 2, 嘉锦: 2, 如皋: 0, 其他: 1 },
{ date: '4/20', 嘉燃: 7, 嘉锦: 0, 如皋: 0, 其他: 0 }, { date: '06/03', 嘉燃: 4, 嘉锦: 3, 如皋: 1, 其他: 0 },
{ date: '4/21', 嘉燃: 5, 嘉锦: 3, 如皋: 0, 其他: 0 }, { date: '06/04', 嘉燃: 2, 嘉锦: 3, 如皋: 0, 其他: 0 },
{ date: '4/22', 嘉燃: 7, 嘉锦: 3, 如皋: 1, 其他: 0 }, { date: '06/05', 嘉燃: 3, 嘉锦: 4, 如皋: 2, 其他: 0 },
{ date: '4/23', 嘉燃: 7, 嘉锦: 15, 如皋: 4, 其他: 3 }, { date: '06/06', 嘉燃: 3, 嘉锦: 3, 如皋: 1, 其他: 1 },
{ date: '4/24', 嘉燃: 9, 嘉锦: 14, 如皋: 4, 其他: 2 }, { date: '06/07', 嘉燃: 1, 嘉锦: 2, 如皋: 1, 其他: 0 },
{ date: '4/25', 嘉燃: 6, 嘉锦: 12, 如皋: 1, 其他: 3 }, { date: '06/08', 嘉燃: 5, 嘉锦: 3, 如皋: 2, 其他: 0 },
{ date: '4/26', 嘉燃: 6, 嘉锦: 13, 如皋: 1, 其他: 2 }, { date: '06/09', 嘉燃: 2, 嘉锦: 3, 如皋: 0, 其他: 0 },
{ date: '4/27', 嘉燃: 6, 嘉锦: 13, 如皋: 2, 其他: 1 },
{ date: '4/28', 嘉燃: 7, 嘉锦: 13, 如皋: 1, 其他: 1 },
{ date: '4/29', 嘉燃: 7, 嘉锦: 13, 如皋: 2, 其他: 0 },
]; ];
const activeStations = [ const activeStations = [
{ name: '嘉兴嘉燃', isNew: false }, { name: '嘉兴嘉燃', isNew: false },
{ name: '嘉兴嘉锦', isNew: false }, { name: '嘉兴嘉锦', isNew: false },
{ name: '如皋华神', isNew: false }, { name: '如皋华神', isNew: false },
{ name: '常熟嘉化', isNew: true }, { name: '桐乡绿能', isNew: false },
{ name: '桐乡绿能', isNew: true }, { name: '嘉燃经开', isNew: false },
{ name: '花桥中石油', isNew: true }, { name: '花桥中石油', isNew: false },
{ name: '嘉善站前路', isNew: true }, { name: '常熟嘉化', isNew: false },
{ name: '嘉善站前路', isNew: false },
]; ];
export function OverallView() { export function OverallView() {
return ( return (
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500"> <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
<div className="grid grid-cols-1 md:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<StatCard <StatCard
title="系统累计预约总单量" title="系统累计预约总单量"
value="424 单" value="690 单"
subValue="全网7周累计历史总量" subValue="全网6周累计历史总量"
icon={Network} icon={Network}
highlight highlight
/> />
<StatCard <StatCard
title="本周(4/25-4/29)新增单量" title="近期(06/01-06/09)新增单量"
value="110 单" value="65 单"
subValue="嘉锦占比过半,增势迅猛" subValue="嘉锦与嘉燃双核驱动,占据主流"
icon={Calendar} icon={Calendar}
trend={116} trend={-47}
/> />
<StatCard <StatCard
title="现阶段活跃运营站点" title="现阶段活跃运营站点"
value="7 个" value="8 个"
subValue="期间新增桐乡、花桥、前路加氢站" subValue="覆盖嘉燃、嘉锦、嘉燃经开、如皋、桐乡、花桥、常熟、嘉善"
icon={MapPin} icon={MapPin}
trend={75} trend={14}
/> />
<StatCard <StatCard
title="近期活跃司机数量" title="近期活跃司机数量"
value="45 人" value="16 人"
subValue="4/25-4/29 期间内活跃" subValue="06/01-06/09 期间内活跃"
icon={UserCheck} icon={UserCheck}
/> />
</div> </div>
@@ -92,7 +89,7 @@ export function OverallView() {
<div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm"> <div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
<div className="mb-6"> <div className="mb-6">
<h3 className="text-lg font-bold text-slate-800">6</h3> <h3 className="text-lg font-bold text-slate-800">6</h3>
<p className="text-sm text-slate-500 mt-1"></p> <p className="text-sm text-slate-500 mt-1"></p>
</div> </div>
<div className="h-[300px]"> <div className="h-[300px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
@@ -110,7 +107,7 @@ export function OverallView() {
<div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm"> <div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
<div className="mb-6"> <div className="mb-6">
<h3 className="text-lg font-bold text-slate-800"></h3> <h3 className="text-lg font-bold text-slate-800"></h3>
<p className="text-sm text-slate-500 mt-1">线</p> <p className="text-sm text-slate-500 mt-1"></p>
</div> </div>
<div className="h-[300px]"> <div className="h-[300px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">

View File

@@ -4,57 +4,55 @@ import { StatCard } from '../ui/StatCard';
import { Users, Truck, Smartphone } from 'lucide-react'; import { Users, Truck, Smartphone } from 'lucide-react';
const driverGrowth = [ const driverGrowth = [
{ date: '4/18', 活跃APP: 57, 绑定车辆: 114 }, { date: '06/01', 活跃APP: 15, 绑定车辆: 2 },
{ date: '4/19', 活跃APP: 57, 绑定车辆: 114 }, { date: '06/02', 活跃APP: 14, 绑定车辆: 2 },
{ date: '4/20', 活跃APP: 58, 绑定车辆: 114 }, { date: '06/03', 活跃APP: 13, 绑定车辆: 1 },
{ date: '4/21', 活跃APP: 59, 绑定车辆: 117 }, { date: '06/04', 活跃APP: 12, 绑定车辆: 2 },
{ date: '4/22', 活跃APP: 61, 绑定车辆: 121 }, { date: '06/05', 活跃APP: 11, 绑定车辆: 1 },
{ date: '4/23', 活跃APP: 74, 绑定车辆: 128 }, { date: '06/06', 活跃APP: 10, 绑定车辆: 1 },
{ date: '4/24', 活跃APP: 82, 绑定车辆: 135 }, { date: '06/07', 活跃APP: 10, 绑定车辆: 1 },
{ date: '4/25', 活跃APP: 84, 绑定车辆: 139 }, { date: '06/08', 活跃APP: 9, 绑定车辆: 1 },
{ date: '4/26', 活跃APP: 86, 绑定车辆: 139 }, { date: '06/09', 活跃APP: 4, 绑定车辆: 0 },
{ date: '4/27', 活跃APP: 89, 绑定车辆: 140 },
{ date: '4/28', 活跃APP: 91, 绑定车辆: 141 },
{ date: '4/29', 活跃APP: 93, 绑定车辆: 142 },
]; ];
const driverByStation = [ const driverByStation = [
{ name: '如皋华神', value: 40 }, { name: '嘉兴嘉锦', value: 10 },
{ name: '嘉兴嘉燃', value: 32 }, { name: '嘉兴嘉燃', value: 8 },
{ name: '嘉兴嘉锦', value: 32 }, { name: '嘉燃经开', value: 5 },
{ name: '桐乡绿能', value: 4 }, { name: '如皋华神', value: 3 },
{ name: '花桥/嘉善等', value: 7 }, { name: '桐乡绿能', value: 2 },
{ name: '花桥/嘉善等', value: 2 },
]; ];
export function UsersView() { export function UsersView() {
return ( return (
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500"> <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
<div className="grid grid-cols-1 md:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<StatCard <StatCard
title="累计入池APP用户总数" title="累计入池APP用户总数"
value="93 人" value="32 人"
subValue="近期活跃司机达到45人" subValue="近期活跃司机达到16人"
icon={Smartphone} icon={Smartphone}
highlight highlight
/> />
<StatCard <StatCard
title="累计绑定车辆司机总数" title="累计绑定车辆司机总数"
value="142 人" value="19 人"
subValue="系统全量历史转化留存" subValue="系统全量历史转化留存"
icon={Truck} icon={Truck}
/> />
<StatCard <StatCard
title="总核验车辆绑定率" title="总核验车辆绑定率"
value="95 %" value="59 %"
subValue="公司自营与核心车队" subValue="公司自营与核心车队"
icon={Users} icon={Users}
trend={5} trend={-36}
/> />
<StatCard <StatCard
title="本周最佳外拓来源区" title="近期最佳外拓来源区"
value="长三角外围" value="如皋/桐乡"
subValue="如皋及花桥累计贡献非标散户6个" subValue="如皋及桐乡累计贡献外围散户活跃"
icon={Users} icon={Users}
/> />
</div> </div>
@@ -62,7 +60,7 @@ export function UsersView() {
<div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm"> <div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
<div className="mb-6"> <div className="mb-6">
<h3 className="text-lg font-bold text-slate-800">APP渗透与车辆绑定追踪</h3> <h3 className="text-lg font-bold text-slate-800">APP渗透与车辆绑定追踪</h3>
<p className="text-sm text-slate-500 mt-1"></p> <p className="text-sm text-slate-500 mt-1"></p>
</div> </div>
<div className="h-[300px]"> <div className="h-[300px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
@@ -82,7 +80,7 @@ export function UsersView() {
<div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm"> <div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
<div className="mb-6"> <div className="mb-6">
<h3 className="text-lg font-bold text-slate-800"></h3> <h3 className="text-lg font-bold text-slate-800"></h3>
<p className="text-sm text-slate-500 mt-1"></p> <p className="text-sm text-slate-500 mt-1"></p>
</div> </div>
<div className="h-[300px]"> <div className="h-[300px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">