EXPLOATARE
Prezentare generală
Locații, mentenanță și acțiuni curente.
Panou operațional
Titlu, descriere și acțiune de context.
Conținutul paginii apare aici.
SURSĂ UNICĂ PENTRU INTERFAȚĂ
Petroutilaj UI Storybook
Inventarul complet al elementelor vizibile din portal: componente, variante, stări, roluri, hărți și ferestre modale. Exemplele folosesc direct stilurile și iconițele din producție.
CONTROL DE COMPLETITUDINE
Acoperire producție
manifest verificat automat
—
Se verifică toate familiile…
Catalogul compară componentele obligatorii cu exemplele de mai jos.
Fluxuri în dialog
Formulare
Roluri și permisiuni
Se verifică suprafețele…
FUNDAȚIE
Culori, tipografie și spațiere
:root tokens
#143b5d
#0b65a4
#24734a
#9a6200
#a52a2a
#222a31
#ffffff
#f4f7f9
#d5dee5
#7f909d
ETICHETĂ DE SECȚIUNE
Titlu principal 36 px
Titlu de panou 18 px
Subtitlu operațional 16 px
Text operațional normal. Limbajul rămâne direct, descriptiv și ușor de scanat.
Text secundar pentru explicații și metadate.Text estompat pentru informații auxiliare.
4812162432
CADRU APLICAȚIE
Bară superioară, navigare și titluri
.topbar / .sidebar / .page-heading
IDENTITATE
Autentificare, activare și încărcare
.login-card / .auth-loading
PORTAL FLOTĂ FEROVIARĂ
Autentificare
Exemplu complet pentru administrator, ECM și chiriaș.
Contul a fost activat. Vă puteți autentifica.
Date de autentificare incorecte.
Se verifică sesiunea
Portalul rămâne ascuns până la confirmarea accesului.
Sesiunea nu a putut fi verificată
Încercați din nou sau reveniți la autentificare.
ACTIVARE CONT
Alegeți parola
Stările pentru parolă nouă, confirmare, link expirat și activare reușită folosesc aceleași controale.
InvitatActivatLink expirat
LUCIDE, AUTO-GĂZDUIT
Toate iconițele disponibile
<pt-icon> · 48/48
FEEDBACK
Stări, priorități, mesaje și notificări
.status / .notice / .toast
În exploatarePlanificatăNecesită atențieNeconformÎnchisăInvitatSuspendat
Prioritate ridicatăPrioritate normală
Informație operațională
Textul explică următorul pas fără să depindă numai de culoare.
Atenție
Verificați datele înainte de salvare.
Operațiunea nu a reușit
Mesajul descrie problema și metoda de recuperare.
Locația a fost actualizată.
Acțiunea necesită atenție imediată.
CONȚINUT GRUPAT
Carduri, liste și rezumate
.summary-card / .vehicle-row / .task-card
8Locomotive
7Locații curente
2Necesită atenție
1Urgent
060-EA · DEMO-EA-003NVR 91 53 0 001003-5
Constanța PortActualizată astăzi
12 septembrie 2026Revizie planificată
Următoarea fereastră
Constatările acceptate vor fi incluse automat.
12SEPT.
060-EA · DEMO-EA-00308:00–14:00 · revizie planificată
Planificată
Activitate recentă
Ultimele modificări din cont.
- Locație actualizatăAstăzi, 10:24
- Constatare acceptatăIeri, 16:08
Sarcini active
Cardul complet este o țintă interactivă.
Necesită atenție
Listă operațională compactă.
DATE STRUCTURATE
Bare, căutare, filtre și tabele responsive
.table-toolbar / .table-scroll
| Utilizator | Locomotivă | Stare | Locație | Acces | Acțiuni |
|---|---|---|---|---|---|
|
Marian Stoicamarian.stoica@example.ro
|
DEMO-EA-003NVR 91 53 0 001003-5 | Activ | Constanța Port | Locație, solicitări și rapoarte |
|
|
Andrei ECMSpecialist mentenanță
|
DEMO-LDH-0021250 CP | Invitat | București Triaj | Numai cazul următor |
Starea goală înlocuiește corpul tabelului atunci când filtrele nu returnează rezultate.
INTRODUCERE DATE
Toate controalele și stările de formular
.field / .permission-box / .form-guidance
Exemplu de eroare: completați câmpurile obligatorii.
Îndrumare: folosiți datele din cartea tehnică și păstrați documentul sursă.
Coordonate: 44.15980, 28.63480 · WGS84
Constanța Port44.15980, 28.63480 · selectată din catalog
VEDERE CALENDARISTICĂ
Singurul loc pentru programarea mentenanței
.month-calendar / .calendar-event
Programarea cere un șablon compatibil. După salvare se deschide exact șablonul ales.
31
1
DEMO-EA-003
2
DEMO-LDE-001
3În recepție
4Anulată
5Închisă
6ConfirmatăDeschisă+2 programări
7
8
9
10
11
12
13
Calendarul afișează programările și oferă singura acțiune de creare. Verificările din șablon se completează apoi din „Dosare de mentenanță”.
GEOLOCALIZARE
Hartă, căutare, selectare și introducere manuală
Leaflet / OpenStreetMap
Poziția flotei
Contur real al României și marcaje operaționale.
Necesită atenție
Acțiuni recomandate pe hartă.
- 1. Căutațistația, localitatea ori adresa
- 2. Verificațipoziția pe harta României
- 3. Folosițilocul la actualizarea locomotivei
Căutați în catalog
2 rezultate feroviare
Sau căutați o adresă
Catalog sincronizat · 31 august 2026
Verificați pe hartă
Selectați un rezultat sau apăsați pe hartă.
Constanța PortStație feroviară · poziție verificată
44.15980, 28.63480
Selector de locație în dialog
Căutare, catalog, hartă, selecție și variantă manuală.
2 REZULTATE
Selectați rezultatul care corespunde poziției reale.
STAȚII FEROVIARE
Puteți selecta și direct pe hartă.
2. Verificați pe hartă
Apăsați pe hartă pentru geocodare inversă.
SELECȚIE CURENTĂBrașov Triaj45.65797, 25.60120 · WGS84
Introduceți locația manual
DOSAR TEHNIC
Caz, flux ECM, măsurări și documente
.check-workflow / .technical-section
- 1Scadentătermen calculat
- 2Programatăinterval rezervat
- 3Comandatăpachet confirmat
- 4În execuțielucrări și măsurători
- 5În recepțieverificare finală
- 6Pusă în serviciuconfirmarea atelierului
- 7Repusă în funcțiunedecizia ECM
2De programat
4Programate
3În lucru sau recepție
12Finalizate
LISTĂ UNIFICATĂ
Dosare curente
Starea și singura acțiune recomandată sunt vizibile în același loc.
| Dosar | Locomotivă | Stare curentă | Pasul următor | Acțiune |
|---|---|---|---|---|
| MW-2026-00015 | LDH 1250 · DA681 | În execuție | Completați lucrările și măsurătorile |
ARHIVĂ ADMINISTRATOR
Dosare finalizate
ECM nu vede această secțiune. Administratorul poate redeschide controlat un dosar, cu eveniment de audit.
| Dosar | Locomotivă | Stare finală | Acțiune |
|---|---|---|---|
| MW-2026-00009 | LDE 2100 · DA681 | Repusă în funcțiune |
1
ScadentăSolicitare acceptată
2
ProgramatăMW-2026-00015
3
ComandatăPachet confirmat
4
În execuțieFișă în completare
5
În recepțiePasul următor
6
Pusă în serviciuDupă recepție
7
Repusă în funcțiuneDecizia ECM
CazCHK-2026-001
Locomotivă060-EA · DEMO-EA-003
DomeniuMotor diesel și lubrifiere
PrioritateRidicată
Descrierea solicitării
Presiune oscilantă și urme de ulei observate la verificarea înainte de plecare.
Fluxul cazului
Rolul ECM vede cazul următor, starea curentă și acțiunile active, fără istoricul închis.
Rezoluție
Se completează după efectuarea și verificarea lucrării.
Comentarii operaționale
Limitele sunt specifice locomotivei.Introduceți limitele din cartea tehnică, procesul tehnologic
sau instrucțiunea aprobată.
Măsurători și probe
Vâscozitate, presiuni, temperaturi, aparat de rulare, electric și siguranță.
Ulei motor — vâscozitate cinematicăÎnregistrați gradul uleiului și valorile la 40 °C și 100 °C
în mm²/s, cu metoda și buletinul de laborator.
Vâscozitate cinematică ulei motor la 40 °C
Metodă, aparat și observații
Uleiuri, lichide, filtre și piese
Produs, specificație, lot, cantitate și acțiune efectuată.
Ulei motor
Verificări din șablonul RI
După programare se alege numai un șablon compatibil; fișele de măsurători se deschid din verificările care le cer.
1.6.1.a · Purjarea separatorului de ulei
ADMINISTRARE ȘI ÎNCHIRIERE
Companii, contracte, utilizatori și test
.vehicle-scope-list / .test-data-panel
12Utilizatori
3Chiriași activi
4Contracte
1Cont suspendat
Setul de test este izolat. Identificatorii încep cu TEST-, iar ștergerea folosește registrul intern.
Contracte de închiriere
Perioadă, responsabilități și active alocate.
Exemplu de stare fără contracte.
Date de test controlate
Conturi activate și înregistrări etichetate separat.
Set de test Petroutilaj
3 roluri, un chiriaș, un contract, 3 locomotive, cazuri și ferestre.
-
Activ
admin.test@example.roAdministrator -
Activ
ecm.test@example.roSpecialist ECM
Ștergerea nu poate include accidental date operaționale reale.
Istoric administrare
Evenimente recente de identitate și acces.
- Invitație trimisă utilizatoruluiAstăzi, 11:42
- Aria de locomotive actualizatăIeri, 15:20
Administrator test
admin.test@example.roParola este afișată o singură dată
Specialist ECM test
ecm.test@example.roAcces numai la cazul următor
Stare goală pentru aria de locomotive: nu există active disponibile.
IOT ȘI TELEMETRIE
Dispozitiv, digital twin, health și date flexibile
.device-endpoint-list / .device-credential-body
Integrare HTTP tip publish/subscribe
Dispozitivul publică telemetrie și sănătate, apoi citește starea dorită.
GET /api/device/v1/twinPOST /api/device/v1/telemetryPOST /api/device/v1/healthPOST /api/device/v1/data
STARE UȘĂÎnchisă
STARE ACTUALĂÎncuiată
STARE DORITĂDescuiere
HEALTHOnline · 18 s
| Dispozitiv | Locomotivă | Sănătate | Ultimul GPS | Stare | Acțiuni |
|---|---|---|---|---|---|
| PT-IOT-0003 | DEMO-EA-003 | Online | 44.15980, 28.63480 | Dezactivat |
|
Se încarcă și se clasifică telemetria…
Stare fără dateDispozitivul nu a publicat în interval.
2.160mesaje
12semnale descoperite
7semnale flexibile
30zile GPS
Traseu GPS zilnic
Hartă demonstrativă cu strat ținut sub navigare.
Traseu Brașov – Sighișoara
24 poziții · început 08:00 · sfârșit 18:00
Semnale descoperite
Linie, bare, circular și evenimente.
Flexibil
LinieTemperatură lichid răcire
engine · 720 valori · °C
31 august, 13:00 · 84 °C
Standard
CircularStare ușă
telemetry · 720 valori
- Închisă82%
- Deschisă18%
Flexibil
BareMod operare
Flexibil
EvenimenteMesaje diagnostic
- RUNNING
- READY
DOCUMENTE
Rapoarte PDF și export
.report-grid / .report-card
Flotă și locații
Identitate, stare, chiriaș, ultima locație și următoarea mentenanță.
8 locomotive accesibileConstatări și sarcini
Priorități, triere, responsabil, termen și rezultat.
4 cazuri activeCalendar mentenanță
Ferestre, intervale, stări, constatări incluse și fișe tehnice.
6 ferestreDispozitive și telemetrie
Activare, sănătate, digital twin, GPS și mesaje flexibile.
2 dispozitiveDocumentul include utilizatorul și momentul generării, iar tabelele se fragmentează între pagini fără să depășească marginile.
ASISTENȚĂ
Ajutor, manuale și referințe
.help-grid / .manual-link-grid / .reference-list
Actualizați locația
Alegeți locomotiva, căutați gara sau selectați direct pe hartă.
Adăugați o constatare
Descrieți simptomul observat pentru următoarea mentenanță.
Semnalați o urgență
Nu așteptați fereastra următoare dacă vehiculul nu poate circula sigur.
Contactați coordonatorulManuale în limba română
Documentație ilustrată, separată pe rol.
Surse tehnice publice
Manualul aprobat al locomotivei rămâne sursa limitelor tehnice.
STRAT MODAL
Toate dimensiunile și tipurile de dialog
<dialog>
Fiecare dialog păstrează titlul asociat, închiderea la Escape, focusul captiv și acțiunile ordonate corect pe mobil.
WCAG 2.2 AA
Focus, ținte, structură și mișcare
accesibilitate transversală
-
Focus vizibilContur de 3 px pentru tastatură, inclusiv pe bara albastră. -
Ținte standard 44 × 44 pxControalele compacte respectă minimum 24 × 24 px, iar checkboxurile sunt în etichete de minimum 44 px. -
Culoarea nu este singurul indiciuStările au text, punct și etichetă explicită. -
Mișcare redusăAnimațiile și tranzițiile sunt eliminate prin prefers-reduced-motion. -
Contrast crescutBordurile și stările devin mai puternice prin prefers-contrast. -
Tabele și hărți cu alternativăTabelele devin carduri pe mobil, iar locațiile au căutare și introducere manuală.
≥ 1050 pxDesktop complet761–1049 pxDesktop compact431–760 pxNavigare mobilă320–430 pxTelefon îngust
Verificați și proba la temperatura stabilizată.