feat: 實作機台日誌核心功能與 IoT 高併發處理架構
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 36s
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 36s
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user