39a246d3c5
1. 實作「目前庫存」矩陣化視圖：將商品作為行、倉庫作為列，支援跨倉庫水位分析與自動加總。 2. 優化矩陣 UI：實作固定欄位 (Sticky Columns) 以應對多倉庫場景，並修正深色模式下的背景色對齊問題。 3. 強化倉儲操作驗證：實作調撥與補貨單的 Alpine.js 前端欄位驗證與 AJAX 提交邏輯，提升操作流暢度。 4. 優化機台地址定位：實作結構化地址解析與 Nominatim API 對接，提升經緯度自動獲取的準確性。 5. 標準化 UI 組件：更新 Breadcrumbs、刪除確認彈窗與搜尋下拉選單，確保全站視覺一致性。 6. 完善多語系支援：補全倉儲管理、機台設定與 UI 提示的繁體中文翻譯。 7. 增加 Product Model 的 stocks() 關聯，支援高效率的庫存矩陣查詢。
194 lines
9.3 KiB
PHP
194 lines
9.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ __('Machine Distribution Map') }} | Star Cloud</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
|
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
|
|
<style>
|
|
body { font-family: 'Inter', 'Outfit', sans-serif; }
|
|
#map { height: 100%; width: 100%; z-index: 1; }
|
|
.luxury-shadow { box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.15); }
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
.dark .glass-panel {
|
|
background: rgba(15, 23, 42, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Custom Marker Style */
|
|
.custom-marker {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.marker-dot {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.3);
|
|
}
|
|
.marker-online { background-color: #10b981; }
|
|
.marker-offline { background-color: #64748b; }
|
|
.marker-error { background-color: #ef4444; }
|
|
</style>
|
|
</head>
|
|
<body class="h-full bg-slate-50 dark:bg-slate-950 overflow-hidden">
|
|
<div class="flex h-full relative">
|
|
<!-- Sidebar -->
|
|
<div class="hidden md:flex flex-col w-96 glass-panel border-r border-slate-200/50 dark:border-slate-800/50 z-20 overflow-hidden">
|
|
<div class="p-8 border-b border-slate-200/50 dark:border-slate-800/50">
|
|
<h1 class="text-2xl font-black text-slate-800 dark:text-white tracking-tight outfit-font">
|
|
Star Cloud
|
|
</h1>
|
|
<p class="text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.4em] mt-2">
|
|
{{ __('Machine Distribution') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto p-4 space-y-3 custom-scrollbar">
|
|
@foreach($machines as $machine)
|
|
<div class="p-4 rounded-2xl bg-white/50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800 hover:border-cyan-500/30 transition-all cursor-pointer group"
|
|
onclick="focusMachine({{ $machine->latitude }}, {{ $machine->longitude }}, {{ $machine->id }})">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-sm font-black text-slate-800 dark:text-white group-hover:text-cyan-500 transition-colors">
|
|
{{ $machine->name }}
|
|
</span>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full {{ $machine->status === 'online' ? 'bg-emerald-500' : ($machine->status === 'offline' ? 'bg-slate-400' : 'bg-rose-500') }}"></span>
|
|
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __($machine->status) }}</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs font-medium text-slate-500 dark:text-slate-400 leading-relaxed">
|
|
{{ $machine->address ?: $machine->location ?: __('No address information') }}
|
|
</p>
|
|
<div class="mt-3 flex items-center gap-2">
|
|
<span class="text-[10px] font-mono text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded shadow-sm">
|
|
{{ $machine->serial_no }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="p-6 border-t border-slate-200/50 dark:border-slate-800/50 bg-slate-50/50 dark:bg-slate-900/50">
|
|
<div class="flex items-center justify-between text-[10px] font-black text-slate-400 uppercase tracking-widest">
|
|
<span>{{ __('Total Machines') }}</span>
|
|
<span class="text-slate-800 dark:text-white">{{ $machines->count() }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Container -->
|
|
<div class="flex-1 relative h-full">
|
|
<div id="map"></div>
|
|
|
|
<!-- Floating Top Header (Mobile) -->
|
|
<div class="md:hidden absolute top-4 left-4 right-4 z-[1000]">
|
|
<div class="glass-panel p-4 rounded-2xl luxury-shadow border border-slate-200/50 dark:border-slate-800/50 flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-lg font-black text-slate-800 dark:text-white tracking-tight outfit-font line-clamp-1">
|
|
{{ __('Machine Distribution Map') }}
|
|
</h1>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-xl bg-cyan-500/10 flex items-center justify-center text-cyan-500 border border-cyan-500/20">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
|
|
|
<script>
|
|
const machines = @json($machines);
|
|
const map = L.map('map', {
|
|
zoomControl: false
|
|
}).setView([23.973875, 120.982024], 8); // Center of Taiwan
|
|
|
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
|
subdomains: 'abcd',
|
|
maxZoom: 20
|
|
}).addTo(map);
|
|
|
|
L.control.zoom({
|
|
position: 'bottomright'
|
|
}).addTo(map);
|
|
|
|
const markers = {};
|
|
|
|
machines.forEach(machine => {
|
|
if (machine.latitude && machine.longitude) {
|
|
const statusClass = `marker-${machine.status}`;
|
|
const icon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div class="marker-dot ${statusClass}"></div>`,
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10]
|
|
});
|
|
|
|
const marker = L.marker([machine.latitude, machine.longitude], { icon: icon }).addTo(map);
|
|
|
|
const popupContent = `
|
|
<div class="p-2 min-w-[200px]">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-2 h-2 rounded-full ${machine.status === 'online' ? 'bg-emerald-500' : (machine.status === 'offline' ? 'bg-slate-400' : 'bg-rose-500')}"></div>
|
|
<span class="text-sm font-black text-slate-800">${machine.name}</span>
|
|
</div>
|
|
<p class="text-[11px] font-medium text-slate-500 mb-2">${machine.address || machine.location || ''}</p>
|
|
<div class="flex items-center justify-between border-t border-slate-100 pt-2 mt-2">
|
|
<span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">${machine.serial_no}</span>
|
|
<span class="text-[9px] font-bold text-cyan-600 uppercase tracking-widest">${machine.status.toUpperCase()}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
marker.bindPopup(popupContent, {
|
|
maxWidth: 300,
|
|
className: 'luxury-popup'
|
|
});
|
|
|
|
markers[machine.id] = marker;
|
|
}
|
|
});
|
|
|
|
function focusMachine(lat, lng, id) {
|
|
map.flyTo([lat, lng], 15, {
|
|
duration: 1.5
|
|
});
|
|
setTimeout(() => {
|
|
if (markers[id]) {
|
|
markers[id].openPopup();
|
|
}
|
|
}, 1600);
|
|
}
|
|
|
|
// Adjust map on window resize
|
|
window.addEventListener('resize', () => {
|
|
map.invalidateSize();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|