feat: 實作機台日誌核心功能與 IoT 高併發處理架構
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 36s

This commit is contained in:
2026-03-09 09:43:51 +08:00
parent 21e064ff91
commit c30c3a399d
53 changed files with 2300 additions and 2130 deletions

View File

@@ -1,78 +1,85 @@
@extends('layouts.admin')
@section('content')
<div class="container mx-auto px-6 py-8">
@section('header')
<div class="flex justify-between items-center">
<h3 class="text-gray-900 dark:text-gray-300 text-3xl font-medium">機台詳情:{{ $machine->name }}</h3>
<div>
<a href="{{ route('admin.machines.edit', $machine) }}" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mr-2">
編輯
</a>
<a href="{{ route('admin.machines.index') }}" class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-800 dark:text-white font-bold py-2 px-4 rounded">
返回列表
</a>
</div>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
機台詳情: {{ $machine->name }}
</h2>
<a href="{{ route('admin.machines.index') }}" class="text-sm text-gray-600 hover:text-gray-900"> 返回列表</a>
</div>
@endsection
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Basic Info -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden p-6">
<h4 class="text-xl font-semibold text-gray-200 mb-4">基本資訊</h4>
<div class="grid grid-cols-2 gap-4">
@section('content')
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
<!-- 基本資訊卡片 -->
<div class="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
<h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">基本資訊</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<p class="text-sm text-gray-700 dark:text-gray-400">位置</p>
<p class="text-lg text-gray-200">{{ $machine->location ?? '-' }}</p>
<p class="text-xs text-gray-500 uppercase">當前狀態</p>
<p class="text-lg font-bold {{ $machine->status === 'online' ? 'text-green-600' : ($machine->status === 'error' ? 'text-red-600' : 'text-gray-600') }}">
{{ strtoupper($machine->status) }}
</p>
</div>
<div>
<p class="text-sm text-gray-700 dark:text-gray-400">狀態</p>
@if($machine->status === 'online')
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">連線中</span>
@elseif($machine->status === 'offline')
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">離線</span>
@else
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">異常</span>
@endif
<p class="text-xs text-gray-500 uppercase">位置</p>
<p class="text-sm">{{ $machine->location }}</p>
</div>
<div>
<p class="text-sm text-gray-700 dark:text-gray-400">溫度</p>
<p class="text-lg text-gray-200">{{ $machine->temperature ? $machine->temperature . '°C' : '-' }}</p>
</div>
<div>
<p class="text-sm text-gray-700 dark:text-gray-400">韌體版本</p>
<p class="text-lg text-gray-200">{{ $machine->firmware_version ?? '-' }}</p>
</div>
<div>
<p class="text-sm text-gray-700 dark:text-gray-400">最後心跳</p>
<p class="text-lg text-gray-200">{{ $machine->last_heartbeat_at ? $machine->last_heartbeat_at->diffForHumans() : '-' }}</p>
<p class="text-xs text-gray-500 uppercase">最後心跳時間</p>
<p class="text-sm">{{ $machine->last_heartbeat_at ?? 'N/A' }}</p>
</div>
</div>
</div>
<!-- Logs -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden p-6">
<h4 class="text-xl font-semibold text-gray-200 mb-4">最近日誌</h4>
<div class="overflow-y-auto max-h-64">
<ul class="divide-y divide-gray-700">
@forelse($machine->logs()->latest()->take(10)->get() as $log)
<li class="py-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
@if($log->level === 'error')
<span class="h-2 w-2 rounded-full bg-red-500 mr-2"></span>
@elseif($log->level === 'warning')
<span class="h-2 w-2 rounded-full bg-yellow-500 mr-2"></span>
@else
<span class="h-2 w-2 rounded-full bg-blue-500 mr-2"></span>
<!-- 日誌顯示區 -->
<div class="bg-gray-900 shadow sm:rounded-lg overflow-hidden border border-gray-700">
<div class="p-4 bg-gray-800 border-b border-gray-700 flex justify-between items-center">
<h3 class="text-md font-medium text-gray-200">即時操作日誌 (最後 50 )</h3>
<span class="text-xs text-gray-400">所有時間為系統時區</span>
</div>
<div class="p-0 max-h-[600px] overflow-y-auto">
<table class="min-w-full divide-y divide-gray-800 font-mono text-xs">
<thead class="bg-gray-800 sticky top-0">
<tr>
<th class="px-4 py-2 text-left text-gray-500">時間</th>
<th class="px-4 py-2 text-left text-gray-500">層級</th>
<th class="px-4 py-2 text-left text-gray-500">訊息</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-800">
@forelse ($machine->logs as $log)
<tr class="hover:bg-gray-800/50">
<td class="px-4 py-2 text-gray-400 whitespace-nowrap">{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
<td class="px-4 py-2">
@php
$levelClasses = [
'info' => 'text-blue-400',
'warning' => 'text-yellow-400',
'error' => 'text-red-400 font-bold',
];
@endphp
<span class="{{ $levelClasses[$log->level] ?? 'text-gray-300' }}">
[{{ strtoupper($log->level) }}]
</span>
</td>
<td class="px-4 py-2 text-gray-200">
{{ $log->message }}
@if($log->context)
<div class="text-[10px] text-gray-500 mt-1">
{{ json_encode($log->context) }}
</div>
@endif
<p class="text-sm text-gray-900 dark:text-gray-300">{{ $log->message }}</p>
</div>
<span class="text-xs text-gray-500">{{ $log->created_at->format('m/d H:i') }}</span>
</div>
</li>
@empty
<li class="py-3 text-center text-gray-500">尚無日誌</li>
@endforelse
</ul>
</td>
</tr>
@empty
<tr>
<td colspan="3" class="px-4 py-8 text-center text-gray-500 italic">暫無相關日誌</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>