fix(ucepsa): simplify operator console tablet UI

This commit is contained in:
Victor Fraile Garcia 2026-05-27 14:22:16 +02:00
parent 94f6e9dc3f
commit d525443de9

View File

@ -22,10 +22,27 @@ PG_CONFIG = {
"connect_timeout": 5,
}
APP_TITLE = getenv("APP_TITLE", "MESAVAULT Edge-OEE - Consola de paros")
APP_TITLE = getenv("APP_TITLE", "MESAVAULT Edge-OEE - Consola de paros UCEPSA")
DEFAULT_MACHINE_ID = getenv("DEFAULT_MACHINE_ID", "CORT-01")
DEFAULT_ASSET = getenv("DEFAULT_ASSET", "revpi_oee_node_01")
ALLOWED_MACHINES = [
item.strip()
for item in getenv("ALLOWED_MACHINES", DEFAULT_MACHINE_ID).split(",")
if item.strip()
]
def resolve_machine_id(raw_value):
machine_id = (raw_value or DEFAULT_MACHINE_ID).strip()
if machine_id not in ALLOWED_MACHINES:
return DEFAULT_MACHINE_ID
return machine_id
app = Flask(__name__)
@ -33,7 +50,7 @@ def get_conn():
return psycopg2.connect(**PG_CONFIG)
def fetch_pending_stops():
def fetch_pending_stops(machine_id):
sql = """
SELECT
id,
@ -54,13 +71,14 @@ def fetch_pending_stops():
cost_eur
FROM mv_hot.edge_oee_stops_recent
WHERE classification_status = 'PENDING'
AND machine_id = %(machine_id)s
ORDER BY started_at DESC
LIMIT 50;
"""
with get_conn() as conn:
with conn.cursor(cursor_factory=psycopg2.extras.RealDictCursor) as cur:
cur.execute(sql)
cur.execute(sql, {"machine_id": machine_id})
return cur.fetchall()
@ -81,7 +99,7 @@ def fetch_causes():
return cur.fetchall()
def classify_stop(stop_id, cause_code, operator_note):
def classify_stop(stop_id, machine_id, cause_code, operator_note):
sql = """
UPDATE mv_hot.edge_oee_machine_stops
SET
@ -90,6 +108,7 @@ def classify_stop(stop_id, cause_code, operator_note):
classification_status = 'CLASSIFIED',
updated_at = now()
WHERE id = %(stop_id)s
AND machine_id = %(machine_id)s
AND classification_status = 'PENDING';
"""
@ -99,300 +118,400 @@ def classify_stop(stop_id, cause_code, operator_note):
sql,
{
"stop_id": stop_id,
"machine_id": machine_id,
"cause_code": cause_code,
"operator_note": operator_note,
},
)
return cur.rowcount
PAGE = """
def fmt_dt(value):
if not value:
return ""
if isinstance(value, datetime):
return value.strftime("%Y-%m-%d %H:%M:%S")
return str(value)
def fmt_num(value, decimals=2):
if value is None:
return "0"
try:
return f"{float(value):.{decimals}f}"
except Exception:
return str(value)
HTML = """
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>{{ app_title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="15">
<style>
:root {
--bg: #0f172a;
--card: #111827;
--card2: #1f2937;
--panel: #111827;
--panel2: #1f2937;
--text: #e5e7eb;
--muted: #9ca3af;
--line: #374151;
--accent: #f97316;
--danger: #ef4444;
--ok: #22c55e;
--button: #2563eb;
--button-hover: #1d4ed8;
--muted: #94a3b8;
--line: #334155;
--blue: #2563eb;
--blue2: #60a5fa;
--green: #22c55e;
--red: #ef4444;
--orange: #f97316;
--input: #020617;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
font-family: Arial, Helvetica, sans-serif;
background: var(--bg);
color: var(--text);
}
header {
padding: 18px 24px;
padding: 18px 22px;
border-bottom: 1px solid var(--line);
background: #020617;
}
h1 {
margin: 0;
font-size: 24px;
margin: 0 0 6px 0;
font-size: 28px;
line-height: 1.1;
}
.subtitle {
color: var(--muted);
margin-top: 6px;
font-size: 14px;
font-size: 15px;
}
main {
padding: 24px;
max-width: 1400px;
padding: 22px;
max-width: 1800px;
margin: 0 auto;
}
.summary {
.machine-tabs {
display: flex;
gap: 12px;
gap: 8px;
margin: 0 0 22px 0;
flex-wrap: wrap;
margin-bottom: 18px;
}
.summary-card {
background: var(--card);
border: 1px solid var(--line);
.machine-tab {
padding: 9px 13px;
border-radius: 10px;
padding: 14px 18px;
min-width: 180px;
background: var(--panel2);
color: #dbeafe;
text-decoration: none;
border: 1px solid var(--line);
font-weight: 600;
font-size: 14px;
}
.summary-card .label {
.machine-tab.active {
background: var(--blue);
color: white;
border-color: var(--blue2);
}
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
min-height: 96px;
}
.card-title {
color: var(--muted);
font-size: 13px;
margin-bottom: 8px;
font-size: 15px;
margin-bottom: 10px;
}
.summary-card .value {
font-size: 26px;
font-weight: bold;
.card-value {
font-size: 34px;
line-height: 1;
font-weight: 700;
}
.card-subtitle {
margin-top: 8px;
color: var(--muted);
font-size: 14px;
}
.table-wrap {
overflow-x: auto;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
th, td {
padding: 12px;
border-bottom: 1px solid var(--line);
vertical-align: top;
text-align: left;
font-size: 14px;
min-width: 1300px;
}
th {
background: var(--card2);
color: #f9fafb;
font-weight: bold;
background: var(--panel2);
color: white;
text-align: left;
font-size: 14px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
td {
padding: 12px 14px;
border-bottom: 1px solid #1e293b;
vertical-align: top;
font-size: 14px;
}
tr:last-child td {
border-bottom: none;
}
.machine-main {
font-weight: 700;
font-size: 16px;
}
.machine-sub {
color: var(--muted);
margin-top: 2px;
font-size: 13px;
}
.badge {
display: inline-block;
padding: 4px 8px;
padding: 4px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: bold;
font-weight: 700;
border: 1px solid transparent;
margin-right: 4px;
}
.badge-open {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
border: 1px solid rgba(239, 68, 68, 0.4);
background: rgba(239, 68, 68, 0.14);
color: #fecaca;
border-color: rgba(239, 68, 68, 0.45);
}
.badge-closed {
background: rgba(34, 197, 94, 0.15);
color: #86efac;
border: 1px solid rgba(34, 197, 94, 0.4);
background: rgba(34, 197, 94, 0.14);
color: #bbf7d0;
border-color: rgba(34, 197, 94, 0.45);
}
.badge-pending {
background: rgba(249, 115, 22, 0.15);
color: #fdba74;
border: 1px solid rgba(249, 115, 22, 0.4);
background: rgba(249, 115, 22, 0.14);
color: #fed7aa;
border-color: rgba(249, 115, 22, 0.45);
margin-top: 5px;
}
select, input[type="text"] {
select,
input[type="text"] {
width: 100%;
box-sizing: border-box;
background: #020617;
color: var(--text);
min-width: 210px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--line);
border-radius: 6px;
padding: 9px;
background: var(--input);
color: var(--text);
font-size: 14px;
}
button {
background: var(--button);
padding: 10px 18px;
border-radius: 8px;
border: 0;
background: var(--blue);
color: white;
border: none;
border-radius: 6px;
padding: 10px 14px;
font-weight: 700;
cursor: pointer;
font-weight: bold;
width: 100%;
font-size: 14px;
}
button:hover {
background: var(--button-hover);
background: #1d4ed8;
}
.empty {
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 32px;
padding: 40px;
text-align: center;
color: var(--muted);
font-size: 18px;
}
.small {
font-size: 12px;
.footer-note {
margin-top: 18px;
color: var(--muted);
font-size: 13px;
}
.nowrap {
white-space: nowrap;
@media (max-width: 900px) {
main {
padding: 14px;
}
.cards {
grid-template-columns: 1fr;
}
h1 {
font-size: 22px;
}
}
</style>
</head>
<body>
<header>
<h1>{{ app_title }}</h1>
<div class="subtitle">
Clasificación manual de paros detectados automáticamente por Edge-OEE.
Última carga: {{ now }}
</div>
</header>
<main>
<div class="summary">
<div class="summary-card">
<div class="label">Paros pendientes</div>
<div class="value">{{ stops|length }}</div>
<header>
<h1>{{ app_title }}</h1>
<div class="subtitle">
Clasificación manual de paros detectados por Edge-OEE ·
Máquina seleccionada: <strong>{{ selected_machine }}</strong> ·
Última carga: {{ loaded_at }}
</div>
</header>
<div class="summary-card">
<div class="card-title">Máquina monitorizada</div>
<div class="card-value">{{ default_machine }}</div>
<div class="card-subtitle">{{ default_asset }}</div>
</div>
</div>
{% if stops|length == 0 %}
<div class="empty">
No hay paros pendientes de clasificar.
</div>
{% else %}
<table>
<thead>
<tr>
<th>ID</th>
<th>Máquina</th>
<th>Inicio</th>
<th>Fin</th>
<th>Estado</th>
<th>Duración</th>
<th>Coste</th>
<th>Causa</th>
<th>Nota</th>
<th>Guardar</th>
</tr>
</thead>
<tbody>
{% for stop in stops %}
<tr>
<form method="post" action="{{ url_for('classify') }}">
<input type="hidden" name="stop_id" value="{{ stop.id }}">
<td class="nowrap">#{{ stop.id }}</td>
<td>
<strong>{{ stop.machine_id or "-" }}</strong>
<div class="small">{{ stop.asset }}</div>
</td>
<td class="nowrap">
{{ stop.started_at }}
</td>
<td class="nowrap">
{{ stop.ended_at or "Abierto" }}
</td>
<td>
{% if stop.status == 'OPEN' %}
<span class="badge badge-open">OPEN</span>
{% else %}
<span class="badge badge-closed">CLOSED</span>
{% endif %}
<br>
<span class="badge badge-pending">{{ stop.classification_status }}</span>
</td>
<td class="nowrap">
{{ "%.2f"|format(stop.duration_min or 0) }} min
</td>
<td class="nowrap">
{{ "%.2f"|format(stop.cost_eur or 0) }}
</td>
<td>
<select name="cause_code" required>
<option value="">Seleccionar causa...</option>
{% for cause in causes %}
<option value="{{ cause.cause_code }}">
{{ cause.cause_name }}
</option>
{% endfor %}
</select>
</td>
<td>
<input type="text" name="operator_note" placeholder="Nota opcional">
</td>
<td>
<button type="submit">Guardar</button>
</td>
</form>
</tr>
<main>
<div class="machine-tabs">
{% for machine in allowed_machines %}
<a
class="machine-tab {% if machine == selected_machine %}active{% endif %}"
href="{{ url_for('index', machine_id=machine) }}"
>
{{ machine }}
</a>
{% endfor %}
</tbody>
</table>
{% endif %}
</main>
</div>
<div class="cards">
<div class="card">
<div class="card-title">Paros pendientes</div>
<div class="card-value">{{ pending_count }}</div>
</div>
<div class="card">
<div class="card-title">Máquina monitorizada</div>
<div class="card-value">{{ selected_machine }}</div>
<div class="card-subtitle">{{ default_asset }}</div>
</div>
</div>
<div class="table-wrap">
{% if stops %}
<table>
<thead>
<tr>
<th>ID</th>
<th>Máquina</th>
<th>Inicio</th>
<th>Fin</th>
<th>Estado</th>
<th>Duración</th>
<th>Coste</th>
<th>Causa</th>
<th>Nota</th>
<th>Guardar</th>
</tr>
</thead>
<tbody>
{% for stop in stops %}
<tr>
<td>#{{ stop.id }}</td>
<td>
<div class="machine-main">{{ stop.machine_id }}</div>
<div class="machine-sub">{{ stop.asset }}</div>
</td>
<td>{{ fmt_dt(stop.started_at) }}</td>
<td>
{% if stop.ended_at %}
{{ fmt_dt(stop.ended_at) }}
{% else %}
Abierto
{% endif %}
</td>
<td>
{% if stop.status == "OPEN" %}
<span class="badge badge-open">OPEN</span>
{% else %}
<span class="badge badge-closed">{{ stop.status }}</span>
{% endif %}
<br>
<span class="badge badge-pending">{{ stop.classification_status }}</span>
</td>
<td>{{ fmt_num(stop.duration_min, 2) }} min</td>
<td>{{ fmt_num(stop.cost_eur, 2) }} </td>
<td>
<form method="post" action="{{ url_for('classify', stop_id=stop.id) }}">
<input type="hidden" name="machine_id" value="{{ selected_machine }}">
<select name="cause_code" required>
<option value="">Seleccionar causa...</option>
{% for cause in causes %}
<option value="{{ cause.cause_code }}">
{{ cause.cause_name }}
</option>
{% endfor %}
</select>
</td>
<td>
<input
type="text"
name="operator_note"
placeholder="Nota opcional"
value="{{ stop.operator_note or '' }}"
>
</td>
<td>
<button type="submit">Guardar</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="empty">
No hay paros pendientes para {{ selected_machine }}.
</div>
{% endif %}
</div>
</main>
</body>
</html>
"""
@ -400,30 +519,45 @@ PAGE = """
@app.route("/", methods=["GET"])
def index():
stops = fetch_pending_stops()
selected_machine = resolve_machine_id(request.args.get("machine_id"))
stops = fetch_pending_stops(selected_machine)
causes = fetch_causes()
return render_template_string(
PAGE,
HTML,
app_title=APP_TITLE,
stops=stops,
causes=causes,
now=datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
default_machine=DEFAULT_MACHINE_ID,
pending_count=len(stops),
selected_machine=selected_machine,
allowed_machines=ALLOWED_MACHINES,
default_machine=selected_machine,
default_asset=DEFAULT_ASSET,
loaded_at=datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
fmt_dt=fmt_dt,
fmt_num=fmt_num,
)
@app.route("/classify", methods=["POST"])
def classify():
stop_id = request.form.get("stop_id")
cause_code = request.form.get("cause_code")
operator_note = request.form.get("operator_note", "").strip() or None
@app.route("/classify/<int:stop_id>", methods=["POST"])
def classify(stop_id):
selected_machine = resolve_machine_id(
request.form.get("machine_id") or request.args.get("machine_id")
)
if stop_id and cause_code:
classify_stop(stop_id, cause_code, operator_note)
cause_code = (request.form.get("cause_code") or "").strip()
operator_note = (request.form.get("operator_note") or "").strip()
return redirect(url_for("index"))
if cause_code:
classify_stop(
stop_id=stop_id,
machine_id=selected_machine,
cause_code=cause_code,
operator_note=operator_note,
)
return redirect(url_for("index", machine_id=selected_machine))
@app.route("/health", methods=["GET"])
@ -432,6 +566,14 @@ def health():
with get_conn() as conn:
with conn.cursor() as cur:
cur.execute("SELECT 1;")
cur.fetchone()
return {"status": "ok"}, 200
except Exception as exc:
return {"status": "error", "error": str(exc)}, 500
if __name__ == "__main__":
port = int(getenv("APP_PORT", "8080"))
app.run(host="0.0.0.0", port=port)