sky121113
87ef247a48
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 1m2s
- 修正 Alpine.js 作用域問題，恢復效期編輯彈窗功能 - 整合機台日誌與效期管理至主列表頁 (Index) - 優化大螢幕貨道格線佈局，解決日期折行問題 - 縮小彈窗字體與內距，調整為極簡奢華風 UI - 新增貨道效期與批號欄位之 Migration 與模型關聯 - 補齊中、英、日三語系翻譯檔
352 lines
19 KiB
PHP
352 lines
19 KiB
PHP
@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
|