da191b0dbf
Sets up the basic project files and dependencies for an AI Studio application. Includes README, `.env.example`, `.gitignore`, basic HTML structure, metadata, `package.json`, Vite configuration, and initial React component setup. This commit provides the foundation for running and deploying the AI Studio app locally.
147 lines
8.2 KiB
TypeScript
147 lines
8.2 KiB
TypeScript
import React from 'react';
|
||
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Legend, Cell } from 'recharts';
|
||
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 }
|
||
];
|
||
|
||
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 },
|
||
];
|
||
|
||
export function EfficiencyView() {
|
||
return (
|
||
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
<div className="bg-gradient-to-r from-indigo-50 to-blue-50 border border-indigo-100 rounded-xl p-5 flex items-start shadow-sm">
|
||
<div className="bg-indigo-100/80 p-2 rounded-lg mr-4 shrink-0">
|
||
<Radio className="w-5 h-5 text-indigo-600" />
|
||
</div>
|
||
<div>
|
||
<h4 className="text-sm font-bold text-indigo-900 flex items-center">
|
||
二期底层物联网 (IoT) 直连规划中
|
||
<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>，与加气机等底层硬件直连获取真实库存，彻底实现“数字孪生式”的加氢调配闭环。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
<StatCard
|
||
title="全网综合日均加注量预估"
|
||
value="1,085 kg"
|
||
subValue="主要覆盖嘉兴、南通等核心枢纽网的测算值"
|
||
icon={Activity}
|
||
highlight
|
||
/>
|
||
<StatCard
|
||
title="全网各站总负荷上限满载"
|
||
value="2,800 kg"
|
||
subValue="所有加注站理论最高吞吐物理上限汇总"
|
||
icon={Zap}
|
||
/>
|
||
<StatCard
|
||
title="系统优化全站有效工时"
|
||
value="~4.5 小时"
|
||
subValue="主要由预约时限测算出的无效排队节省时间"
|
||
icon={Clock}
|
||
trend={-45}
|
||
/>
|
||
<StatCard
|
||
title="平均承载饱和度 (预估)"
|
||
value="38.5 %"
|
||
subValue="预留了充足的峰值缓冲池与调配拓展空间"
|
||
icon={Target}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
|
||
<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>
|
||
</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">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<AreaChart data={stationGrowth} margin={{ top: 10, right: 10, left: -25, bottom: 0 }}>
|
||
<defs>
|
||
<linearGradient id="colorJr" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="5%" stopColor="#0ea5e9" stopOpacity={0.3}/>
|
||
<stop offset="95%" stopColor="#0ea5e9" stopOpacity={0}/>
|
||
</linearGradient>
|
||
<linearGradient id="colorJj" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3}/>
|
||
<stop offset="95%" stopColor="#8b5cf6" stopOpacity={0}/>
|
||
</linearGradient>
|
||
</defs>
|
||
<XAxis dataKey="date" axisLine={false} tickLine={false} tick={{fill: '#64748b', fontSize: 12}} dy={10} />
|
||
<YAxis axisLine={false} tickLine={false} tick={{fill: '#64748b', fontSize: 12}} />
|
||
<CartesianGrid vertical={false} stroke="#f1f5f9" strokeDasharray="4 4" />
|
||
<Tooltip cursor={{stroke: '#cbd5e1', strokeWidth: 1, strokeDasharray: '4 4'}} contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }} />
|
||
<Legend verticalAlign="top" height={36} iconType="circle" wrapperStyle={{ fontSize: '12px' }} />
|
||
<Area type="monotone" dataKey="嘉燃" stackId="1" stroke="#0ea5e9" strokeWidth={2} fillOpacity={1} fill="url(#colorJr)" />
|
||
<Area type="monotone" dataKey="嘉锦" stackId="1" stroke="#8b5cf6" strokeWidth={2} fillOpacity={1} fill="url(#colorJj)" />
|
||
<Area type="monotone" dataKey="其他" stackId="1" stroke="#f59e0b" strokeWidth={2} fillOpacity={0.1} />
|
||
</AreaChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm flex flex-col justify-between relative overflow-hidden">
|
||
<div className="absolute top-0 right-0 p-6 opacity-5 pointer-events-none">
|
||
<Zap className="w-32 h-32" />
|
||
</div>
|
||
<div className="mb-6 relative z-10">
|
||
<div className="flex flex-col xl:flex-row xl:justify-between xl:items-start gap-3">
|
||
<div>
|
||
<h3 className="text-lg font-bold text-slate-800">各站负荷吞吐预估模型 (kg)</h3>
|
||
<p className="text-sm text-slate-500 mt-1">数据按历史预约进行算法推演，演示智能匹配效果</p>
|
||
</div>
|
||
<span className="flex items-center text-[10px] lg:text-xs font-bold bg-amber-50 text-amber-600 px-2 py-1 rounded-md border border-amber-200 w-fit shrink-0">
|
||
<AlertCircle className="w-3 h-3 mr-1.5" />
|
||
IoT硬件直连筹备中
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1 min-h-[300px] relative z-10">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<BarChart data={stationData} layout="vertical" margin={{ top: 0, right: 30, left: 20, bottom: 0 }}>
|
||
<XAxis type="number" hide />
|
||
<YAxis dataKey="name" type="category" axisLine={false} tickLine={false} tick={{fill: '#475569', fontSize: 12, fontWeight: 500}} width={80} />
|
||
<Tooltip cursor={{fill: '#f8fafc'}} contentStyle={{ borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.05)' }}/>
|
||
<Legend verticalAlign="top" height={36} iconType="circle" wrapperStyle={{ fontSize: '12px' }} />
|
||
<Bar dataKey="消耗" stackId="a" fill="#4f46e5" radius={[0, 0, 0, 0]} barSize={24} name="当前消耗测算负荷" />
|
||
<Bar dataKey="剩余" stackId="a" fill="#e2e8f0" radius={[0, 4, 4, 0]} barSize={24} name="未饱和推演备用空间" />
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|