103 lines
12 KiB
HTML
103 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Force Monitor — Kiosk</title>
|
|
<style>
|
|
:root{--bg1:#030712;--bg2:#0f172a;--panel:rgba(255,255,255,.06);--border:rgba(255,255,255,.1);--text:#f8fafc;--muted:#94a3b8;--ok:#34d399;--warn:#facc15;--bad:#f87171;}
|
|
body[data-theme="light"]{--bg1:#eef4ff;--bg2:#f8fafc;--panel:rgba(255,255,255,.84);--border:rgba(15,23,42,.10);--text:#0f172a;--muted:#475569;--ok:#059669;--warn:#b45309;--bad:#dc2626;}
|
|
*{box-sizing:border-box} body{margin:0;min-height:100vh;color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;background:radial-gradient(circle at 20% 10%, rgba(56,189,248,.14), transparent 20%),radial-gradient(circle at 80% 10%, rgba(168,85,247,.14), transparent 18%),linear-gradient(180deg,var(--bg1),var(--bg2));}
|
|
body[data-theme="light"]{background:radial-gradient(circle at 20% 10%, rgba(14,165,233,.10), transparent 20%),radial-gradient(circle at 80% 10%, rgba(168,85,247,.10), transparent 18%),linear-gradient(180deg,var(--bg1),var(--bg2));}
|
|
.wrap{width:min(96vw,1800px);margin:0 auto;padding:18px 22px 28px;} .row,.nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.spacer{flex:1 1 auto}
|
|
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);text-decoration:none;font-weight:600;cursor:pointer}
|
|
body[data-theme="light"] .btn{background:rgba(255,255,255,.88);}
|
|
.glass{background:var(--panel);border:1px solid var(--border);border-radius:24px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
|
|
.hero{padding:18px 24px;margin-bottom:18px}.status{font-size:64px;font-weight:900;line-height:1;margin-top:12px}.sub{color:var(--muted)} .mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
|
|
.grid{display:grid;gap:16px}.cards{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.card{padding:22px 24px}.label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .value{font-size:54px;font-weight:900;line-height:1;margin-top:12px}
|
|
.small{font-size:18px;color:var(--muted);margin-top:10px}.banner{padding:16px 18px;border-radius:18px;border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.14);display:none;margin-bottom:16px}.banner.show{display:block}
|
|
.ok{color:var(--ok)} .warning{color:var(--warn)} .critical{color:var(--bad)} .neutral{color:var(--muted)}
|
|
.split{display:grid;grid-template-columns:1.35fr .85fr;gap:16px}.panel{padding:18px 22px} ul{margin:12px 0 0;padding-left:18px} li{margin:8px 0;color:var(--muted)}
|
|
@media (max-width:1200px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.value{font-size:42px}.status{font-size:48px}}
|
|
@media (max-width:760px){.cards{grid-template-columns:1fr}.wrap{padding:14px}.value{font-size:36px}.status{font-size:38px}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="nav" style="margin-bottom:14px">
|
|
<a class="btn" href="/">Dashboard</a><a class="btn" href="/history">History</a><a class="btn" href="/alarms">Alarms</a><a class="btn" href="/kiosk">Kiosk</a><a class="btn" href="/process-capability">Process capability</a><a class="btn" href="/reports">Reports</a><a class="btn" href="/license">License</a>
|
|
<div class="spacer"></div><button id="theme-toggle" class="btn" type="button">Light theme</button><button id="fullscreen-btn" class="btn" type="button">Enter fullscreen</button>
|
|
</div>
|
|
<div id="alarm-banner" class="banner"></div>
|
|
<div class="glass hero">
|
|
<div class="row"><div><div class="label" id="title-kicker">Force Monitor</div><div class="status" id="status-text">LOADING</div><div class="sub" id="status-reason">Preparing kiosk view…</div></div><div class="spacer"></div><div class="mono sub" id="clock">--</div></div>
|
|
</div>
|
|
<div class="grid cards">
|
|
<div class="glass card"><div class="label">Total peak</div><div id="total-value" class="value mono">--</div><div id="total-sub" class="small">kN / %</div></div>
|
|
<div class="glass card"><div class="label">Left</div><div id="left-value" class="value mono">--</div><div id="left-sub" class="small">kN / %</div></div>
|
|
<div class="glass card"><div class="label">Right</div><div id="right-value" class="value mono">--</div><div id="right-sub" class="small">kN / %</div></div>
|
|
<div class="glass card"><div class="label">Imbalance</div><div id="imb-value" class="value mono">--</div><div id="imb-sub" class="small">bias / trend</div></div>
|
|
</div>
|
|
<div class="split">
|
|
<div class="glass panel">
|
|
<div class="row"><h2 style="margin:0;font-size:30px">Live production verdict</h2><div class="spacer"></div><span id="stale-pill" class="mono sub">Data freshness: --</span></div>
|
|
<div id="verdict-summary" class="status neutral" style="font-size:56px;margin-top:14px">WAITING</div>
|
|
<div id="verdict-detail" class="sub" style="font-size:22px;margin-top:12px">No PLC data yet.</div>
|
|
<div class="row" style="margin-top:22px">
|
|
<div class="glass" style="padding:14px 16px;min-width:220px"><div class="label">Trend direction</div><div id="trend-force" class="value mono" style="font-size:32px">--</div><div id="trend-force-sub" class="small">force drift</div></div>
|
|
<div class="glass" style="padding:14px 16px;min-width:220px"><div class="label">Process stability</div><div id="trend-stability" class="value mono" style="font-size:32px">--</div><div id="trend-stability-sub" class="small">stability</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="glass panel">
|
|
<div class="row"><h2 style="margin:0;font-size:28px">Active attention items</h2><div class="spacer"></div><span class="sub mono" id="last-refresh">Last refresh: --</span></div>
|
|
<ul id="attention-list"><li>Loading live status…</li></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/static/app-common.js"></script>
|
|
<script>
|
|
let cfg={ui:{title:'Force Monitor',unit_force:'kN',unit_percent:'%'},thresholds:{warning_percent:80,critical_percent:95,imbalance_warning_percent:10,imbalance_critical_percent:20}};
|
|
const fmt=(n,d=1)=>Number(n||0).toFixed(d); const cls=(z)=>z==='critical'?'critical':z==='warning'?'warning':'ok';
|
|
function zone(v,w,c){return v>=c?'critical':v>=w?'warning':'ok'}
|
|
function setThemeTitle(){document.getElementById('title-kicker').textContent=cfg.ui.title+' • kiosk'}
|
|
async function loadCfg(){try{const r=await fetch('/api/config/public',{cache:'no-store'}); if(r.ok){cfg=await r.json(); setThemeTitle();}}catch(e){}}
|
|
async function refreshAll(){
|
|
try{
|
|
const [dataRes, trendRes, alarmsRes]=await Promise.all([
|
|
fetch('/api/data',{cache:'no-store'}), fetch('/api/trend?window=15m',{cache:'no-store'}), fetch('/api/alarms?limit=8',{cache:'no-store'})
|
|
]);
|
|
if(dataRes.status===403){document.getElementById('status-text').textContent='LICENSE REQUIRED';document.getElementById('status-text').className='status critical';document.getElementById('status-reason').textContent='Open /license to activate the application.';return;}
|
|
const d=await dataRes.json(); const t=trendRes.ok?await trendRes.json():{}; const a=alarmsRes.ok?await alarmsRes.json():{events:[]};
|
|
const connected=!!d.connected, stale=!!d.stale; const lp=Number(d.sila_l)||0, rp=Number(d.sila_r)||0, tp=Number(d.sum_percent)||0, tkn=Number(d.sum_kn)||0, imb=Number(d.imbalance_percent)||0, bias=Number(d.bias_percent)||0;
|
|
const lkn=Number(d.sila_l_kn)||0, rkn=Number(d.sila_r_kn)||0;
|
|
document.getElementById('clock').textContent=new Date().toLocaleString(); document.getElementById('last-refresh').textContent='Last refresh: '+new Date().toLocaleTimeString();
|
|
document.getElementById('total-value').textContent=fmt(tkn,1)+' '+(cfg.ui.unit_force||'kN'); document.getElementById('total-sub').textContent=fmt(tp,1)+(cfg.ui.unit_percent||'%')+' total load';
|
|
document.getElementById('left-value').textContent=fmt(lp,1)+(cfg.ui.unit_percent||'%'); document.getElementById('left-sub').textContent=fmt(lkn,1)+' '+(cfg.ui.unit_force||'kN');
|
|
document.getElementById('right-value').textContent=fmt(rp,1)+(cfg.ui.unit_percent||'%'); document.getElementById('right-sub').textContent=fmt(rkn,1)+' '+(cfg.ui.unit_force||'kN');
|
|
document.getElementById('imb-value').textContent=fmt(imb,1)+(cfg.ui.unit_percent||'%'); document.getElementById('imb-sub').textContent='Bias '+fmt(bias,1)+(cfg.ui.unit_percent||'%');
|
|
const zForce=zone(Math.max(lp,rp),cfg.thresholds.warning_percent,cfg.thresholds.critical_percent); const zImb=zone(imb,cfg.thresholds.imbalance_warning_percent,cfg.thresholds.imbalance_critical_percent);
|
|
const statusEl=document.getElementById('status-text'); const reasonEl=document.getElementById('status-reason'); const verdict=document.getElementById('verdict-summary'); const detail=document.getElementById('verdict-detail');
|
|
let verdictText='OK', reason='Production looks stable.'; let level='ok';
|
|
if(!connected){ verdictText='PLC OFFLINE'; reason='No PLC communication.'; level='critical'; }
|
|
else if(stale){ verdictText='STALE DATA'; reason='PLC connected, but no fresh values are arriving.'; level='warning'; }
|
|
else if(zForce==='critical' || zImb==='critical'){ verdictText='CRITICAL'; reason='Force or imbalance reached critical region.'; level='critical'; }
|
|
else if(zForce==='warning' || zImb==='warning'){ verdictText='WARNING'; reason='Process is above warning thresholds.'; level='warning'; }
|
|
statusEl.textContent=verdictText; statusEl.className='status '+level; reasonEl.textContent=reason; verdict.textContent=verdictText; verdict.className='status '+level; detail.textContent=reason;
|
|
document.getElementById('stale-pill').textContent='Data freshness: '+(stale?'stale':connected?'fresh':'offline');
|
|
document.getElementById('trend-force').textContent=((Number(t.force_delta_pct)||0)>=0?'+':'')+fmt(t.force_delta_pct,1)+(cfg.ui.unit_percent||'%');
|
|
document.getElementById('trend-force').className='value mono '+(((Number(t.force_delta_pct)||0)>=3)?'warning':'ok');
|
|
document.getElementById('trend-force-sub').textContent=(t.force_direction||'--')+' over 15m';
|
|
document.getElementById('trend-stability').textContent=String(t.process_stability||'--').toUpperCase();
|
|
document.getElementById('trend-stability').className='value mono '+(t.process_stability==='unstable'?'critical':t.process_stability==='caution'?'warning':'ok');
|
|
document.getElementById('trend-stability-sub').textContent=t.stability_reason||'No trend reason';
|
|
const attention=[]; if(!connected) attention.push('Restore PLC communication to recover live monitoring.'); if(stale) attention.push('Investigate stale data path between PLC and the app.'); if(zForce!=='ok') attention.push('Force level is '+zForce+'; review current load and top-force causes.'); if(zImb!=='ok') attention.push('Imbalance is '+zImb+'; check centering, alignment, and tooling.');
|
|
(a.events||[]).slice(0,4).forEach(ev=>{if(ev.severity!=='info') attention.push((ev.time||'')+' • '+(ev.message||''));});
|
|
const ul=document.getElementById('attention-list'); ul.innerHTML=''; (attention.length?attention:['No active attention items.']).forEach(item=>{const li=document.createElement('li'); li.textContent=item; ul.appendChild(li);});
|
|
const banner=document.getElementById('alarm-banner'); if(level==='critical'){banner.textContent='Critical attention required — review force, imbalance, or PLC connectivity.'; banner.classList.add('show');} else if(level==='warning'){banner.textContent='Warning condition active — process should be reviewed.'; banner.classList.add('show');} else {banner.classList.remove('show');}
|
|
}catch(err){console.warn(err)}
|
|
}
|
|
AppUI.initTheme(); AppUI.initFullscreen({ buttonId:'fullscreen-btn' });
|
|
loadCfg().then(refreshAll); setInterval(refreshAll, 1500);
|
|
</script>
|
|
</body>
|
|
</html> |