shishengliang/ln-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 全屏模式重新设计为纵向布局
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source 
- 去掉 CSS transform 旋转（移动端不兼容）
- KPI 改为单行横排4个卡片
- 标题栏+KPI 紧凑排列在顶部
- 表格区域占满剩余空间，可滚动查看所有列
- 移动端和桌面端统一布局

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-02 00:38:26 +08:00
parent 8b95e53098
commit e57b8d8801
1 changed files with 29 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/modules/mileage/MonitoringView.tsx
View File

@@ -241,82 +241,53 @@ export default function MonitoringView() {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 z-[100] bg-slate-950 flex flex-row p-4 gap-4 overflow-hidden portrait:origin-top-left"
style={{
...(typeof window !== 'undefined' && window.innerHeight > window.innerWidth
? { transform: 'rotate(90deg) translateY(-100%)', width: window.innerHeight, height: window.innerWidth, transformOrigin: 'top left' }
: {}),
}}
className="fixed inset-0 z-[100] bg-slate-950 flex flex-col overflow-hidden"
>
{/* Sidebar Stats */}
<div className="flex flex-col gap-4 w-72 flex-shrink-0">
{/* Top bar: title + KPI row + close */}
<div className="flex-shrink-0 p-3 border-b border-slate-800 space-y-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-1 h-6 bg-blue-500 rounded-full"></div>
<h2 className="text-white font-bold text-lg">全屏监控</h2>
<div className="w-1 h-5 bg-blue-500 rounded-full"></div>
<h2 className="text-white font-bold text-sm">全屏监控</h2>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => {
setFilterDept('All');
setFilterProject('All');
setFilterPlate('All');
setSearchTerm('');
}}
className="p-2 bg-slate-800 text-slate-400 rounded-full hover:text-blue-400 transition-colors"
title="重置筛选"
onClick={() => { setFilterDept('All'); setFilterCustomer('All'); setFilterPlate('All'); setSearchTerm(''); }}
className="p-1.5 bg-slate-800 text-slate-400 rounded-full hover:text-blue-400 transition-colors"
>
<RotateCcw size={16} />
<RotateCcw size={14} />
</button>
<button
onClick={toggleFullscreen}
className="p-2 bg-slate-800 text-slate-400 rounded-full hover:text-white transition-colors"
>
<Minimize2 size={20} />
<button onClick={toggleFullscreen} className="p-1.5 bg-slate-800 text-slate-400 rounded-full hover:text-white transition-colors">
<Minimize2 size={16} />
</button>
</div>
</div>
{/* KPI Cards in Fullscreen */}
<div className="grid grid-cols-2 landscape:grid-cols-1 gap-3">
<div className={`bg-slate-900/50 border p-4 rounded-2xl transition-all ${sortBy === 'today' ? 'border-blue-500/50 ring-1 ring-blue-500/20' : 'border-slate-800'}`}>
<div className="text-[10px] font-bold text-slate-500 uppercase mb-1">今日总里程</div>
<div className="text-2xl font-black text-white tracking-tighter">
{stats.totalToday.toLocaleString()}
<span className="text-blue-400 text-xs ml-2">KM</span>
{/* KPI — single row */}
<div className="flex gap-2">
<div className={`flex-1 bg-slate-900/50 border px-3 py-2 rounded-xl ${sortBy === 'today' ? 'border-blue-500/50' : 'border-slate-800'}`}>
<div className="text-[8px] font-bold text-slate-500 uppercase">今日总里程</div>
<div className="text-base font-black text-white">{Math.round(stats.totalToday).toLocaleString()} <span className="text-blue-400 text-[9px]">km</span></div>
</div>
<div className={`flex-1 bg-slate-900/50 border px-3 py-2 rounded-xl ${sortBy === 'total' ? 'border-blue-500/50' : 'border-slate-800'}`}>
<div className="text-[8px] font-bold text-slate-500 uppercase">累计总里程</div>
<div className="text-base font-black text-white">{Math.round(stats.totalAll).toLocaleString()} <span className="text-blue-400 text-[9px]">km</span></div>
</div>
<div className={`bg-slate-900/50 border p-4 rounded-2xl transition-all ${sortBy === 'total' ? 'border-blue-500/50 ring-1 ring-blue-500/20' : 'border-slate-800'}`}>
<div className="text-[10px] font-bold text-slate-500 uppercase mb-1">累计总里程</div>
<div className="text-2xl font-black text-white tracking-tighter">
{stats.totalAll.toLocaleString()}
<span className="text-blue-400 text-xs ml-2">KM</span>
</div>
</div>
<div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl">
<div className="text-[10px] font-bold text-slate-500 uppercase mb-1">监控台数</div>
<div className="text-2xl font-black text-white tracking-tighter">
{stats.vehicleCount}
<span className="text-blue-400 text-xs ml-2">台</span>
</div>
</div>
<div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl">
<div className="text-[10px] font-bold text-slate-500 uppercase mb-1">
平均单车 ({sortBy === 'today' ? '今日' : '累计'})
</div>
<div className="text-2xl font-black text-white tracking-tighter">
{(stats.vehicleCount > 0 ? (sortBy === 'today' ? stats.totalToday : stats.totalAll) / stats.vehicleCount : 0).toFixed(0)}
<span className="text-blue-400 text-xs ml-2">KM</span>
<div className="flex-1 bg-slate-900/50 border border-slate-800 px-3 py-2 rounded-xl">
<div className="text-[8px] font-bold text-slate-500 uppercase">监控台数</div>
<div className="text-base font-black text-white">{stats.vehicleCount} <span className="text-blue-400 text-[9px]">台</span></div>
</div>
<div className="flex-1 bg-slate-900/50 border border-slate-800 px-3 py-2 rounded-xl">
<div className="text-[8px] font-bold text-slate-500 uppercase">平均单车</div>
<div className="text-base font-black text-white">{(stats.vehicleCount > 0 ? (sortBy === 'today' ? stats.totalToday : stats.totalAll) / stats.vehicleCount : 0).toFixed(0)} <span className="text-blue-400 text-[9px]">km</span></div>
</div>
</div>
</div>
{/* Main Table Area */}
<div className="flex-1 bg-slate-900/30 border border-slate-800 rounded-2xl overflow-hidden flex flex-col">
<div className="p-4 border-b border-slate-800 flex justify-between items-center bg-slate-900/50">
<span className="text-xs font-bold text-slate-400 uppercase tracking-widest">车辆实时明细数据</span>
<div className="flex items-center gap-4 text-[10px] text-slate-500">
{/* Table Area */}
<div className="flex-1 overflow-hidden flex flex-col">
<div className="px-3 py-2 border-b border-slate-800 flex justify-between items-center flex-shrink-0">
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">车辆实时明细数据</span>
<div className="flex items-center gap-3 text-[9px] text-slate-500">
<div className="flex items-center gap-1">
<div className="w-2 h-2 rounded-full bg-green-500"></div>
<span>在线</span>