mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] 整合機台效期管理功能並優化 UI 比例
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 1m2s
Details

Browse Source 
- 修正 Alpine.js 作用域問題，恢復效期編輯彈窗功能
- 整合機台日誌與效期管理至主列表頁 (Index)
- 優化大螢幕貨道格線佈局，解決日期折行問題
- 縮小彈窗字體與內距，調整為極簡奢華風 UI
- 新增貨道效期與批號欄位之 Migration 與模型關聯
- 補齊中、英、日三語系翻譯檔
This commit is contained in:
sky121113
2026-03-24 16:46:04 +08:00
parent 38770b080b
commit 87ef247a48
22 changed files with 2539 additions and 647 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1061
resources/views/admin/machines/index.blade.php
View File

File diff suppressed because it is too large Load Diff

129
resources/views/admin/machines/logs.blade.php
View File

@@ -1,129 +0,0 @@
@extends('layouts.admin')
@section('title', __('Machine Logs'))
@section('content')
<div class="space-y-10 pb-20">
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<div>
<h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Machine Logs') }}</h1>
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Monitor events and system activity across your vending fleet.') }}</p>
</div>
</div>
<!-- Machine Logs Content (Integrated Card - Same as Roles) -->
<div class="luxury-card rounded-3xl p-8 animate-luxury-in">
<!-- Toolbar (Integrated Filters) -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
<form method="GET" action="{{ route('admin.machines.logs') }}" class="flex flex-wrap items-center gap-4 group">
<div class="space-y-1">
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{{ __('Machine') }}</label>
<select name="machine_id" class="luxury-select text-xs h-9 py-0" onchange="this.form.submit()">
<option value="">{{ __('All Machines') }}</option>
@foreach($machines as $machine)
<option value="{{ $machine->id }}" {{ request('machine_id') == $machine->id ? 'selected' : '' }}>
{{ $machine->name }}
</option>
@endforeach
</select>
</div>
<div class="space-y-1">
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{{ __('Level') }}</label>
<select name="level" class="luxury-select text-xs h-9 py-0" onchange="this.form.submit()">
<option value="">{{ __('All Levels') }}</option>
<option value="info" {{ request('level') == 'info' ? 'selected' : '' }}>{{ __('Info') }}</option>
<option value="warning" {{ request('level') == 'warning' ? 'selected' : '' }}>{{ __('Warning') }}</option>
<option value="error" {{ request('level') == 'error' ? 'selected' : '' }}>{{ __('Error') }}</option>
</select>
</div>
<div class="flex items-end gap-2 mt-5">
<button type="submit" class="p-2 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 transition-colors border border-slate-200 dark:border-slate-700">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</button>
<a href="{{ route('admin.machines.logs') }}" class="p-2 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 transition-colors border border-slate-200 dark:border-slate-700">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
</a>
</div>
<input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
</form>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-separate border-spacing-y-0">
<thead>
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
<th class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Timestamp') }}</th>
<th class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Machine') }}</th>
<th class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Level') }}</th>
<th class="px-6 py-4 text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Message Content') }}</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
@forelse ($logs as $log)
<tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
<td class="px-6 py-6 transition-colors">
<div class="text-[13px] font-bold font-display tracking-widest text-slate-600 dark:text-slate-300">
{{ $log->created_at->format('Y-m-d') }}
</div>
<div class="text-[11px] font-bold text-slate-400 dark:text-slate-500 tracking-wider mt-0.5 uppercase">
{{ $log->created_at->format('H:i:s') }}
</div>
</td>
<td class="px-6 py-6 transition-colors">
<a href="{{ route('admin.machines.show', $log->machine_id) }}" class="inline-flex items-center gap-2 group/link">
<span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover/link:text-cyan-500 transition-colors">
{{ $log->machine->name ?? __('Unknown') }}
</span>
<svg class="w-3.5 h-3.5 text-slate-300 dark:text-slate-600 opacity-0 group-hover/link:opacity-100 transition-all -translate-x-2 group-hover/link:translate-x-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
</td>
<td class="px-6 py-6 transition-colors">
@php
$badgeStyles = [
'info' => 'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border-cyan-500/20',
'warning' => 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20',
'error' => 'bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20',
];
$currentStyle = $badgeStyles[$log->level] ?? 'bg-slate-500/10 text-slate-600 border-slate-500/20';
@endphp
<span class="inline-flex items-center px-3 py-1 rounded-lg border text-[11px] font-black uppercase tracking-wider {{ $currentStyle }}">
<span class="w-1.5 h-1.5 rounded-full bg-current mr-2 animate-pulse"></span>
{{ __(ucfirst($log->level)) }}
</span>
</td>
<td class="px-6 py-6 transition-colors">
<p class="text-[14px] font-medium text-slate-700 dark:text-slate-200 leading-relaxed max-w-xl">
{{ $log->message }}
</p>
@if($log->context)
<div class="mt-3 p-4 rounded-xl bg-slate-50/50 dark:bg-[#0f172a]/50 border border-slate-100 dark:border-slate-800/50 group-hover:bg-white dark:group-hover:bg-[#0f172a] transition-colors">
<pre class="text-[10px] font-bold text-slate-400 dark:text-slate-500 whitespace-pre-wrap break-all">{{ json_encode($log->context, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) }}</pre>
</div>
@endif
</td>
</tr>
@empty
<tr>
<td colspan="4" class="px-6 py-24 text-center">
<div class="flex flex-col items-center">
<div class="p-4 rounded-full bg-slate-50 dark:bg-slate-800/50 mb-4 border border-slate-100 dark:border-slate-800/50">
<svg class="w-8 h-8 text-slate-300 dark:text-slate-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 7v10c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2z"/><path d="M12 11l4-4"/><path d="M8 15l4-4"/></svg>
</div>
<span class="text-sm font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">{{ __('No matching logs found') }}</span>
</div>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="mt-8 border-t border-slate-100 dark:border-slate-800 pt-6">
{{ $logs->links('vendor.pagination.luxury') }}
</div>
</div>
</div>
@endsection

6
resources/views/admin/machines/show.blade.php
View File

@@ -30,6 +30,12 @@
<p class="text-xs text-gray-500 uppercase">{{ __('Last Heartbeat') }}</p>
<p class="text-sm">{{ $machine->last_heartbeat_at ?? __('N/A') }}</p>
</div>
<div>
<p class="text-xs text-gray-500 uppercase">{{ __('Current Page') }}</p>
<p class="text-sm font-bold shadow-sm inline-block px-2 py-1 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">
{{ $machine->current_page_label ?: '-' }}
</p>
</div>
</div>
</div>

351
resources/views/admin/machines/utilization.blade.php Normal file
View File

@@ -0,0 +1,351 @@
@extends('layouts.admin')
@section('header')
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight font-display tracking-tight">
{{ __('Machine Management') }} > {{ __('Utilization Rate') }}
</h2>
@endsection
@section('content')
<div class="space-y-8" x-data="utilizationDashboard()">
<!-- Page Header & Global Discovery -->
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
<div>
<h1 class="text-4xl font-black text-slate-800 dark:text-white tracking-tighter font-display">{{ __('Fleet Performance') }}</h1>
<p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-[0.2em]">{{ __('Utilization, OEE and Operational Intelligence') }}</p>
</div>
<!-- Global Date Filter -->
<div class="flex items-center bg-white dark:bg-slate-900 rounded-2xl p-1.5 shadow-sm border border-slate-200 dark:border-slate-800 animate-luxury-in">
<button @click="prevDay()" class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors text-slate-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" /></svg></button>
<div class="px-4 text-sm font-black text-slate-700 dark:text-slate-200 font-mono tracking-tight" x-text="startDate"></div>
<button @click="nextDay()" class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors text-slate-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg></button>
</div>
</div>
<!-- Fleet Summary Cards (Always visible) -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 animate-luxury-in">
<!-- Avg OEE Card -->
<div class="luxury-card p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 relative group overflow-hidden shadow-lg">
<p class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-4">
<span class="w-2 h-2 rounded-full bg-cyan-500"></span>
{{ __('Fleet Avg OEE') }}
</p>
<div class="flex items-baseline gap-2">
<span class="text-6xl font-black text-slate-900 dark:text-white font-display tracking-tighter" x-text="fleetStats.avgOee">0</span>
<span class="text-2xl font-black text-cyan-500/80">%</span>
</div>
<div class="mt-8 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-slate-400">
<span>{{ __('Target Performance') }}</span>
<span class="text-emerald-500 text-xs">85%</span>
</div>
</div>
<!-- Online Count Card -->
<div class="luxury-card p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 relative group overflow-hidden shadow-lg">
<p class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-4">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
{{ __('Machines Online') }}
</p>
<div class="flex items-baseline gap-2">
<span class="text-6xl font-black text-slate-900 dark:text-white font-display tracking-tighter" x-text="fleetStats.onlineCount">0</span>
<span class="text-2xl font-black text-emerald-500/80">/ {{ count($machines) }}</span>
</div>
<div class="mt-8 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-slate-400">
<span>{{ __('Current Operational State') }}</span>
<span class="text-emerald-500 text-xs">LIVE</span>
</div>
</div>
<!-- Total Sales Card -->
<div class="luxury-card p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 relative group overflow-hidden shadow-lg">
<p class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-4">
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
{{ __('Total Daily Sales') }}
</p>
<div class="flex items-baseline gap-2">
<span class="text-6xl font-black text-slate-900 dark:text-white font-display tracking-tighter" x-text="fleetStats.totalSales">0</span>
<span class="text-2xl font-black text-amber-500/80">{{ __('Orders') }}</span>
</div>
<div class="mt-8 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-slate-400">
<span>{{ __('System Health') }}</span>
<div class="flex items-center gap-1.5 text-rose-500">
<span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
<span x-text="fleetStats.alertCount">0</span> Alerts
</div>
</div>
</div>
</div>
<!-- Main Workspace -->
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- Navigation: Machine Sidebar -->
<div class="lg:col-span-1">
<div class="luxury-card p-0 rounded-3xl overflow-hidden shadow-xl sticky top-24 border border-slate-100 dark:border-slate-800">
<div class="p-6 border-b border-slate-50 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
<h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">{{ __('Select Machine') }}</h3>
</div>
<div class="max-h-[500px] overflow-y-auto custom-scrollbar divide-y divide-slate-50 dark:divide-slate-800">
@foreach($machines as $machine)
<button @click="selectMachine('{{ $machine->id }}', '{{ $machine->serial_no }}', '{{ addslashes($machine->name) }}')"
:class="selectedMachineId == '{{ $machine->id }}' ? 'bg-cyan-500/5 dark:bg-cyan-500/10' : 'hover:bg-slate-50/80 dark:hover:bg-slate-800/40'"
class="w-full text-left p-6 transition-all duration-300 relative group">
<div x-show="selectedMachineId == '{{ $machine->id }}'" class="absolute inset-y-0 left-0 w-1 bg-cyan-500 rounded-r-full"></div>
<div class="flex items-center gap-4">
<div class="flex-shrink-0 relative">
<div :class="selectedMachineId == '{{ $machine->id }}' ? 'bg-cyan-500 shadow-cyan-500/20' : 'bg-slate-100 dark:bg-slate-800'"
class="w-12 h-12 rounded-2xl flex items-center justify-center transition-all duration-500 shadow-lg group-hover:scale-110">
<svg class="w-6 h-6" :class="selectedMachineId == '{{ $machine->id }}' ? 'text-white' : 'text-slate-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
</div>
<span class="absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-white dark:border-slate-900"
:class="'{{ $machine->status }}' === 'online' ? 'bg-emerald-500' : 'bg-slate-400'"></span>
</div>
<div class="min-w-0">
<div class="text-sm font-black text-slate-800 dark:text-slate-100 truncate tracking-tight" :class="selectedMachineId == '{{ $machine->id }}' ? 'text-cyan-600 dark:text-cyan-400' : ''">{{ $machine->name }}</div>
<div class="text-[10px] font-mono font-bold text-slate-400 uppercase tracking-[0.2em] mt-0.5">{{ $machine->serial_no }}</div>
</div>
</div>
</button>
@endforeach
</div>
</div>
</div>
<!-- Detail: Metrics & Insights -->
<div class="lg:col-span-3 space-y-8">
<template x-if="selectedMachineId">
<div class="animate-luxury-in space-y-8">
<!-- OEE Triple Gauges -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="luxury-card p-6 rounded-3xl text-center">
<div id="gauge-availability" class="mx-auto h-40"></div>
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest -mt-4">{{ __('Availability') }}</h4>
</div>
<div class="luxury-card p-6 rounded-3xl text-center">
<div id="gauge-performance" class="mx-auto h-40"></div>
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest -mt-4">{{ __('Performance') }}</h4>
</div>
<div class="luxury-card p-6 rounded-3xl text-center">
<div id="gauge-quality" class="mx-auto h-40"></div>
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest -mt-4">{{ __('Quality') }}</h4>
</div>
</div>
<!-- Unified Timeline Chart -->
<div class="luxury-card p-8 rounded-3xl relative overflow-hidden">
<div class="flex items-center justify-between mb-8">
<div>
<h3 class="text-xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Unified Operational Timeline') }}</h3>
<p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-1">{{ __('Connectivity vs Sales Correlation') }}</p>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<span class="w-3 h-1 rounded-full bg-cyan-500"></span>
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">連線狀態</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-amber-500"></span>
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">銷售事件</span>
</div>
</div>
</div>
<div id="unified-timeline" class="w-full min-h-[350px]"></div>
<div x-show="loading" class="absolute inset-0 bg-white/60 dark:bg-slate-900/60 backdrop-blur-[2px] z-20 flex items-center justify-center">
<div class="flex flex-col items-center gap-3">
<div class="w-8 h-8 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin"></div>
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Aggregating intelligence...</span>
</div>
</div>
</div>
</div>
</template>
<!-- Initial State -->
<template x-if="!selectedMachineId">
<div class="luxury-card p-24 rounded-3xl flex flex-col items-center justify-center text-center opacity-80 border-dashed border-2 border-slate-200 dark:border-slate-800">
<div class="w-24 h-24 rounded-full bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center mb-8">
<svg class="w-12 h-12 text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-2.123-7.947c-2.333 0-4.66.307-6.877.914m-1.5-3.619l1.125-1.125m0 0l1.125 1.125m-1.125-1.125V3h-.75m-6.75 4.5V3h-.75m2.25 13.5v3.25a2.25 2.25 0 01-2.25 2.25h-5.25a2.25 2.25 0 01-2.25-2.25V5.25A2.25 2.25 0 015.25 3H12m1.5 12l1.125-1.125m0 0l1.125 1.125m-1.125-1.125V18" /></svg>
</div>
<h3 class="text-2xl font-black text-slate-400 dark:text-slate-600 tracking-tighter">{{ __('Select a machine to deep dive') }}</h3>
<p class="text-sm font-bold text-slate-400 mt-2 uppercase tracking-widest">{{ __('Real-time OEE analysis awaits') }}</p>
</div>
</template>
</div>
</div>
</div>
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
function utilizationDashboard() {
return {
selectedMachineId: '',
selectedMachineSn: '',
selectedMachineName: '',
startDate: new Date().toISOString().split('T')[0],
loading: false,
fleetStats: { avgOee: 0, onlineCount: 0, totalSales: 0, alertCount: 0 },
charts: {},
prevDay() {
let d = new Date(this.startDate);
d.setDate(d.getDate() - 1);
this.startDate = d.toISOString().split('T')[0];
this.fetchData();
},
nextDay() {
let d = new Date(this.startDate);
d.setDate(d.getDate() + 1);
this.startDate = d.toISOString().split('T')[0];
this.fetchData();
},
init() {
// Fleet stats from server/mock
this.fleetStats = {
avgOee: 72.4,
onlineCount: Number("{{ count($machines->where('status', 'online')) }}") || 0,
totalSales: 128,
alertCount: 3
};
},
selectMachine(id, sn, name) {
this.selectedMachineId = id;
this.selectedMachineSn = sn;
this.selectedMachineName = name;
this.fetchData();
},
async fetchData() {
if (!this.selectedMachineId) return;
this.loading = true;
try {
const response = await fetch(`/admin/machines/${this.selectedMachineId}/utilization-ajax?date=${this.startDate}`);
const result = await response.json();
if (result.success) {
const stats = result.data.overview;
const chartData = result.data.chart;
this.$nextTick(() => {
this.renderGauges(stats);
this.renderTimeline(chartData);
});
}
} catch (error) {
console.error('Failed to fetch utilization data:', error);
} finally {
this.loading = false;
}
},
renderGauges({availability, performance, quality}) {
const isDark = document.documentElement.classList.contains('dark');
const trackColor = isDark ? '#1e293b' : '#f1f5f9';
const createGauge = (id, value, color) => {
const el = document.querySelector(`#${id}`);
if (!el) return;
if (this.charts[id]) this.charts[id].destroy();
const options = {
series: [value],
chart: { height: 200, type: 'radialBar', sparkline: { enabled: true } },
plotOptions: {
radialBar: {
hollow: { size: '65%' },
dataLabels: {
name: { show: false },
value: {
offsetY: 10,
fontSize: '22px',
fontWeight: 900,
fontFamily: 'Outfit',
color: isDark ? '#fff' : '#1e293b',
formatter: (v) => v + '%'
}
},
track: { background: trackColor }
}
},
colors: [color],
stroke: { lineCap: 'round' }
};
this.charts[id] = new ApexCharts(el, options);
this.charts[id].render();
};
createGauge('gauge-availability', availability, '#06b6d4');
createGauge('gauge-performance', performance, '#f59e0b');
createGauge('gauge-quality', quality, '#10b981');
},
renderTimeline(chartData) {
const el = document.querySelector("#unified-timeline");
if (!el) return;
if (this.charts['timeline']) this.charts['timeline'].destroy();
const isDark = document.documentElement.classList.contains('dark');
const options = {
series: [
{
name: '{{ __("OEE.Activity") }}',
type: 'rangeBar',
data: chartData.uptime || []
},
{
name: '{{ __("OEE.Sales") }}',
type: 'scatter',
data: chartData.sales || []
}
],
chart: {
height: 350,
toolbar: { show: false },
background: 'transparent',
fontFamily: 'Outfit'
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '40%',
rangeBarGroupRows: true
}
},
xaxis: {
type: 'datetime',
labels: { style: { colors: isDark ? '#94a3b8' : '#64748b', fontWeight: 700 } }
},
yaxis: {
labels: { style: { colors: isDark ? '#94a3b8' : '#64748b', fontWeight: 700 } }
},
markers: { size: 6, colors: ['#f59e0b'], strokeColors: '#fff', strokeWidth: 2 },
grid: { borderColor: isDark ? '#1e293b' : '#f1f5f9', strokeDashArray: 4 },
legend: { show: false },
tooltip: {
theme: isDark ? 'dark' : 'light',
x: { format: 'HH:mm' }
},
noData: {
text: '{{ __("No machines available") }}',
align: 'center',
verticalAlign: 'middle',
style: { color: isDark ? '#475569' : '#94a3b8', fontSize: '14px', fontFamily: 'Outfit' }
}
};
this.charts['timeline'] = new ApexCharts(el, options);
this.charts['timeline'].render();
}
}
}
</script>
@endpush
@endsection