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
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
@@ -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="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" />
|
||||
周期: 4/18 - 4/29 最新
|
||||
周期: 06/01 - 06/09 最新
|
||||
</div>
|
||||
<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" />
|
||||
|
||||
@@ -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="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>
|
||||
<p className="text-slate-400 mb-1.5 font-medium">数据统计周期 (本周)</p>
|
||||
<p className="font-bold text-slate-200 text-sm">26年4月18日 - 4月29日</p>
|
||||
<p className="text-slate-400 mb-1.5 font-medium">数据统计周期 (近期)</p>
|
||||
<p className="font-bold text-slate-200 text-sm">26年6月1日 - 6月9日</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">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5"></span>
|
||||
数据库连通正常
|
||||
|
||||
@@ -4,26 +4,23 @@ import { StatCard } from '../ui/StatCard';
|
||||
import { Activity, Target, TrendingUp, Zap, Clock, Radio, AlertCircle } from 'lucide-react';
|
||||
|
||||
const stationData = [
|
||||
{ name: '嘉兴嘉燃', 消耗: 420, 剩余: 580, 上限: 1000 },
|
||||
{ name: '嘉兴嘉锦', 消耗: 380, 剩余: 420, 上限: 800 },
|
||||
{ name: '如皋华神', 消耗: 160, 剩余: 340, 上限: 500 },
|
||||
{ name: '花桥中石油', 消耗: 80, 剩余: 220, 上限: 300 },
|
||||
{ name: '常熟嘉化', 消耗: 45, 剩余: 155, 上限: 200 }
|
||||
{ name: '嘉兴嘉锦', 消耗: 450, 剩余: 550, 上限: 1000 },
|
||||
{ name: '嘉燃经开', 消耗: 120, 剩余: 380, 上限: 500 },
|
||||
{ name: '桐乡绿能', 消耗: 120, 剩余: 380, 上限: 500 },
|
||||
{ name: '嘉兴嘉燃', 消耗: 90, 剩余: 410, 上限: 500 },
|
||||
{ name: '如皋华神', 消耗: 20, 剩余: 280, 上限: 300 }
|
||||
];
|
||||
|
||||
const stationGrowth = [
|
||||
{ date: '4/18', 嘉燃: 10, 嘉锦: 3, 其他: 0 },
|
||||
{ date: '4/19', 嘉燃: 6, 嘉锦: 3, 其他: 0 },
|
||||
{ date: '4/20', 嘉燃: 7, 嘉锦: 0, 其他: 0 },
|
||||
{ date: '4/21', 嘉燃: 5, 嘉锦: 3, 其他: 0 },
|
||||
{ date: '4/22', 嘉燃: 7, 嘉锦: 3, 其他: 1 },
|
||||
{ date: '4/23', 嘉燃: 7, 嘉锦: 15, 其他: 7 },
|
||||
{ date: '4/24', 嘉燃: 9, 嘉锦: 14, 其他: 6 },
|
||||
{ date: '4/25', 嘉燃: 6, 嘉锦: 12, 其他: 4 },
|
||||
{ date: '4/26', 嘉燃: 6, 嘉锦: 13, 其他: 3 },
|
||||
{ date: '4/27', 嘉燃: 6, 嘉锦: 13, 其他: 3 },
|
||||
{ date: '4/28', 嘉燃: 7, 嘉锦: 13, 其他: 2 },
|
||||
{ date: '4/29', 嘉燃: 7, 嘉锦: 13, 其他: 2 },
|
||||
{ date: '06/01', 嘉燃: 3, 嘉锦: 3, 其他: 1 },
|
||||
{ date: '06/02', 嘉燃: 2, 嘉锦: 2, 其他: 1 },
|
||||
{ date: '06/03', 嘉燃: 4, 嘉锦: 3, 其他: 1 },
|
||||
{ date: '06/04', 嘉燃: 2, 嘉锦: 3, 其他: 0 },
|
||||
{ date: '06/05', 嘉燃: 3, 嘉锦: 4, 其他: 2 },
|
||||
{ date: '06/06', 嘉燃: 3, 嘉锦: 3, 其他: 2 },
|
||||
{ date: '06/07', 嘉燃: 1, 嘉锦: 2, 其他: 1 },
|
||||
{ date: '06/08', 嘉燃: 5, 嘉锦: 3, 其他: 2 },
|
||||
{ date: '06/09', 嘉燃: 2, 嘉锦: 3, 其他: 0 },
|
||||
];
|
||||
|
||||
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>
|
||||
</h4>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<StatCard
|
||||
title="全网综合日均加注量预估"
|
||||
value="1,085 kg"
|
||||
<StatCard
|
||||
title="全网综合日均加注量预估"
|
||||
value="800 kg"
|
||||
subValue="主要覆盖嘉兴、南通等核心枢纽网的测算值"
|
||||
icon={Activity}
|
||||
icon={Activity}
|
||||
highlight
|
||||
/>
|
||||
<StatCard
|
||||
title="全网各站总负荷上限满载"
|
||||
value="2,800 kg"
|
||||
<StatCard
|
||||
title="全网各站总负荷上限满载"
|
||||
value="2,800 kg"
|
||||
subValue="所有加注站理论最高吞吐物理上限汇总"
|
||||
icon={Zap}
|
||||
icon={Zap}
|
||||
/>
|
||||
<StatCard
|
||||
title="系统优化全站有效工时"
|
||||
value="~4.5 小时"
|
||||
<StatCard
|
||||
title="系统优化全站有效工时"
|
||||
value="~4.2 小时"
|
||||
subValue="主要由预约时限测算出的无效排队节省时间"
|
||||
icon={Clock}
|
||||
trend={-45}
|
||||
icon={Clock}
|
||||
trend={-42}
|
||||
/>
|
||||
<StatCard
|
||||
title="平均承载饱和度 (预估)"
|
||||
value="38.5 %"
|
||||
<StatCard
|
||||
title="平均承载饱和度 (预估)"
|
||||
value="28.6 %"
|
||||
subValue="预留了充足的峰值缓冲池与调配拓展空间"
|
||||
icon={Target}
|
||||
icon={Target}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -78,11 +75,11 @@ export function EfficiencyView() {
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<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 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" />
|
||||
全线看涨
|
||||
近期平稳
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[300px] w-full">
|
||||
|
||||
@@ -4,70 +4,67 @@ import { StatCard } from '../ui/StatCard';
|
||||
import { Calendar, Network, MapPin, UserCheck } from 'lucide-react';
|
||||
|
||||
const weeklyTrend = [
|
||||
{ name: '3/16-3/20', 总量: 17 },
|
||||
{ name: '3/21-3/27', 总量: 47 },
|
||||
{ name: '3/28-4/6', 总量: 55 },
|
||||
{ name: '4/7-4/11', 总量: 40 },
|
||||
{ name: '4/12-4/17', 总量: 49 },
|
||||
{ name: '4/18-4/24', 总量: 106 },
|
||||
{ name: '4/25-4/29', 总量: 110 },
|
||||
{ name: '05/03-05/09', 总量: 153 },
|
||||
{ name: '05/10-05/16', 总量: 118 },
|
||||
{ name: '05/17-05/23', 总量: 137 },
|
||||
{ name: '05/24-05/30', 总量: 95 },
|
||||
{ name: '05/31-06/06', 总量: 122 },
|
||||
{ name: '06/07-06/09', 总量: 65 },
|
||||
];
|
||||
|
||||
const dailyBreakdown = [
|
||||
{ date: '4/18', 嘉燃: 10, 嘉锦: 3, 如皋: 0, 其他: 0 },
|
||||
{ date: '4/19', 嘉燃: 6, 嘉锦: 3, 如皋: 0, 其他: 0 },
|
||||
{ date: '4/20', 嘉燃: 7, 嘉锦: 0, 如皋: 0, 其他: 0 },
|
||||
{ date: '4/21', 嘉燃: 5, 嘉锦: 3, 如皋: 0, 其他: 0 },
|
||||
{ date: '4/22', 嘉燃: 7, 嘉锦: 3, 如皋: 1, 其他: 0 },
|
||||
{ date: '4/23', 嘉燃: 7, 嘉锦: 15, 如皋: 4, 其他: 3 },
|
||||
{ date: '4/24', 嘉燃: 9, 嘉锦: 14, 如皋: 4, 其他: 2 },
|
||||
{ date: '4/25', 嘉燃: 6, 嘉锦: 12, 如皋: 1, 其他: 3 },
|
||||
{ date: '4/26', 嘉燃: 6, 嘉锦: 13, 如皋: 1, 其他: 2 },
|
||||
{ date: '4/27', 嘉燃: 6, 嘉锦: 13, 如皋: 2, 其他: 1 },
|
||||
{ date: '4/28', 嘉燃: 7, 嘉锦: 13, 如皋: 1, 其他: 1 },
|
||||
{ date: '4/29', 嘉燃: 7, 嘉锦: 13, 如皋: 2, 其他: 0 },
|
||||
{ date: '06/01', 嘉燃: 3, 嘉锦: 3, 如皋: 1, 其他: 0 },
|
||||
{ date: '06/02', 嘉燃: 2, 嘉锦: 2, 如皋: 0, 其他: 1 },
|
||||
{ date: '06/03', 嘉燃: 4, 嘉锦: 3, 如皋: 1, 其他: 0 },
|
||||
{ date: '06/04', 嘉燃: 2, 嘉锦: 3, 如皋: 0, 其他: 0 },
|
||||
{ date: '06/05', 嘉燃: 3, 嘉锦: 4, 如皋: 2, 其他: 0 },
|
||||
{ date: '06/06', 嘉燃: 3, 嘉锦: 3, 如皋: 1, 其他: 1 },
|
||||
{ date: '06/07', 嘉燃: 1, 嘉锦: 2, 如皋: 1, 其他: 0 },
|
||||
{ date: '06/08', 嘉燃: 5, 嘉锦: 3, 如皋: 2, 其他: 0 },
|
||||
{ date: '06/09', 嘉燃: 2, 嘉锦: 3, 如皋: 0, 其他: 0 },
|
||||
];
|
||||
|
||||
const activeStations = [
|
||||
{ name: '嘉兴嘉燃', isNew: false },
|
||||
{ name: '嘉兴嘉锦', isNew: false },
|
||||
{ name: '如皋华神', isNew: false },
|
||||
{ name: '常熟嘉化', isNew: true },
|
||||
{ name: '桐乡绿能', isNew: true },
|
||||
{ name: '花桥中石油', isNew: true },
|
||||
{ name: '嘉善站前路', isNew: true },
|
||||
{ name: '桐乡绿能', isNew: false },
|
||||
{ name: '嘉燃经开', isNew: false },
|
||||
{ name: '花桥中石油', isNew: false },
|
||||
{ name: '常熟嘉化', isNew: false },
|
||||
{ name: '嘉善站前路', isNew: false },
|
||||
];
|
||||
|
||||
export function OverallView() {
|
||||
return (
|
||||
<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">
|
||||
<StatCard
|
||||
title="系统累计预约总单量"
|
||||
value="424 单"
|
||||
subValue="全网7周累计历史总量"
|
||||
icon={Network}
|
||||
<StatCard
|
||||
title="系统累计预约总单量"
|
||||
value="690 单"
|
||||
subValue="全网6周累计历史总量"
|
||||
icon={Network}
|
||||
highlight
|
||||
/>
|
||||
<StatCard
|
||||
title="本周(4/25-4/29)新增单量"
|
||||
value="110 单"
|
||||
subValue="嘉锦占比过半，增势迅猛"
|
||||
icon={Calendar}
|
||||
trend={116}
|
||||
<StatCard
|
||||
title="近期(06/01-06/09)新增单量"
|
||||
value="65 单"
|
||||
subValue="嘉锦与嘉燃双核驱动，占据主流"
|
||||
icon={Calendar}
|
||||
trend={-47}
|
||||
/>
|
||||
<StatCard
|
||||
title="现阶段活跃运营站点"
|
||||
value="7 个"
|
||||
subValue="期间新增桐乡、花桥、前路加氢站"
|
||||
icon={MapPin}
|
||||
trend={75}
|
||||
<StatCard
|
||||
title="现阶段活跃运营站点"
|
||||
value="8 个"
|
||||
subValue="覆盖嘉燃、嘉锦、嘉燃经开、如皋、桐乡、花桥、常熟、嘉善"
|
||||
icon={MapPin}
|
||||
trend={14}
|
||||
/>
|
||||
<StatCard
|
||||
title="近期活跃司机数量"
|
||||
value="45 人"
|
||||
subValue="4/25-4/29 期间内活跃"
|
||||
icon={UserCheck}
|
||||
<StatCard
|
||||
title="近期活跃司机数量"
|
||||
value="16 人"
|
||||
subValue="06/01-06/09 期间内活跃"
|
||||
icon={UserCheck}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -92,7 +89,7 @@ export function OverallView() {
|
||||
<div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
|
||||
<div className="mb-6">
|
||||
<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 className="h-[300px]">
|
||||
<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="mb-6">
|
||||
<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 className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
|
||||
@@ -4,57 +4,55 @@ import { StatCard } from '../ui/StatCard';
|
||||
import { Users, Truck, Smartphone } from 'lucide-react';
|
||||
|
||||
const driverGrowth = [
|
||||
{ date: '4/18', 活跃APP: 57, 绑定车辆: 114 },
|
||||
{ date: '4/19', 活跃APP: 57, 绑定车辆: 114 },
|
||||
{ date: '4/20', 活跃APP: 58, 绑定车辆: 114 },
|
||||
{ date: '4/21', 活跃APP: 59, 绑定车辆: 117 },
|
||||
{ date: '4/22', 活跃APP: 61, 绑定车辆: 121 },
|
||||
{ date: '4/23', 活跃APP: 74, 绑定车辆: 128 },
|
||||
{ date: '4/24', 活跃APP: 82, 绑定车辆: 135 },
|
||||
{ date: '4/25', 活跃APP: 84, 绑定车辆: 139 },
|
||||
{ date: '4/26', 活跃APP: 86, 绑定车辆: 139 },
|
||||
{ date: '4/27', 活跃APP: 89, 绑定车辆: 140 },
|
||||
{ date: '4/28', 活跃APP: 91, 绑定车辆: 141 },
|
||||
{ date: '4/29', 活跃APP: 93, 绑定车辆: 142 },
|
||||
{ date: '06/01', 活跃APP: 15, 绑定车辆: 2 },
|
||||
{ date: '06/02', 活跃APP: 14, 绑定车辆: 2 },
|
||||
{ date: '06/03', 活跃APP: 13, 绑定车辆: 1 },
|
||||
{ date: '06/04', 活跃APP: 12, 绑定车辆: 2 },
|
||||
{ date: '06/05', 活跃APP: 11, 绑定车辆: 1 },
|
||||
{ date: '06/06', 活跃APP: 10, 绑定车辆: 1 },
|
||||
{ date: '06/07', 活跃APP: 10, 绑定车辆: 1 },
|
||||
{ date: '06/08', 活跃APP: 9, 绑定车辆: 1 },
|
||||
{ date: '06/09', 活跃APP: 4, 绑定车辆: 0 },
|
||||
];
|
||||
|
||||
const driverByStation = [
|
||||
{ name: '如皋华神', value: 40 },
|
||||
{ name: '嘉兴嘉燃', value: 32 },
|
||||
{ name: '嘉兴嘉锦', value: 32 },
|
||||
{ name: '桐乡绿能', value: 4 },
|
||||
{ name: '花桥/嘉善等', value: 7 },
|
||||
{ name: '嘉兴嘉锦', value: 10 },
|
||||
{ name: '嘉兴嘉燃', value: 8 },
|
||||
{ name: '嘉燃经开', value: 5 },
|
||||
{ name: '如皋华神', value: 3 },
|
||||
{ name: '桐乡绿能', value: 2 },
|
||||
{ name: '花桥/嘉善等', value: 2 },
|
||||
];
|
||||
|
||||
export function UsersView() {
|
||||
return (
|
||||
<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">
|
||||
<StatCard
|
||||
title="累计入池APP用户总数"
|
||||
value="93 人"
|
||||
subValue="近期活跃司机达到45人"
|
||||
icon={Smartphone}
|
||||
<StatCard
|
||||
title="累计入池APP用户总数"
|
||||
value="32 人"
|
||||
subValue="近期活跃司机达到16人"
|
||||
icon={Smartphone}
|
||||
highlight
|
||||
/>
|
||||
<StatCard
|
||||
title="累计绑定车辆司机总数"
|
||||
value="142 人"
|
||||
<StatCard
|
||||
title="累计绑定车辆司机总数"
|
||||
value="19 人"
|
||||
subValue="系统全量历史转化留存"
|
||||
icon={Truck}
|
||||
icon={Truck}
|
||||
/>
|
||||
<StatCard
|
||||
title="总核验车辆绑定率"
|
||||
value="95 %"
|
||||
<StatCard
|
||||
title="总核验车辆绑定率"
|
||||
value="59 %"
|
||||
subValue="公司自营与核心车队"
|
||||
icon={Users}
|
||||
trend={5}
|
||||
icon={Users}
|
||||
trend={-36}
|
||||
/>
|
||||
<StatCard
|
||||
title="本周最佳外拓来源区"
|
||||
value="长三角外围"
|
||||
subValue="如皋及花桥累计贡献非标散户6个"
|
||||
icon={Users}
|
||||
<StatCard
|
||||
title="近期最佳外拓来源区"
|
||||
value="如皋/桐乡"
|
||||
subValue="如皋及桐乡累计贡献外围散户活跃"
|
||||
icon={Users}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +60,7 @@ export function UsersView() {
|
||||
<div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
|
||||
<div className="mb-6">
|
||||
<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 className="h-[300px]">
|
||||
<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="mb-6">
|
||||
<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 className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
|
||||
Reference in New Issue
Block a user