9e931eed0f
- Start.js (last20Messages) als JS-Mock in /apiMockData/jsMockFiles gespeichert - de.js (digitale Eingänge) in /apiMockData/SERVICE verlagert - Beide werden über eigene API-Endpoints bzw. per Script-Tag aus Development-Verzeichnis geladen - Kein Zugriff mehr über /public notwendig, Verhalten in DEV und PROD identisch
⚡ CPLv4.0 – Frontend für das Kabelüberwachungssystem
Das Frontend von CPLv4.0 stellt verschiedene Systeminformationen, Messdaten und Konfigurationen übersichtlich dar. Die Benutzeroberfläche ist intuitiv und modular aufgebaut und bietet Zugriff auf digitale sowie analoge Ein-/Ausgänge, TDR-Messungen, Referenzkurven, Systemmeldungen und Einstellungen.
🧭 Seitenübersicht
🔹 Header
- Zeigt den Namen der Station / des Geräts (CPL)
- Abmelden-Button für Admins
🔹 Footer
- Firmenname, Telefonnummer, E-Mail
- PDF-Handbücher (Anleitung) als Slider mit Download-Funktion
🖥️ /dashboard – Übersicht
- Letzten 20 Meldungen aus dem System
- Versionsinformationen (Frontend, Backend)
- Baugruppenträger mit Modulnamen und Statusanzeige (grün = OK, rot = Fehler)
- Netzwerk-Informationen:
- IP-Adresse
- Subnetzmaske
- Gateway
- OPC UA Status (in Betrieb oder offline)
- OPC UA Nodeset Name
📡 /kabelueberwachung – Kabelüberwachung
- Visualisierung der Slots (KUE 1–32) in 4 Racks
- Darstellung von:
- Isolationswiderstand
- Schleifenwiderstand
- TDR-Messkurven und Vergleich mit Referenzkurve
- Alarme (z. B. Erdschluss, Aderbruch)
- Einstellung pro Slot (via Zahnrad → Modal)
🔌 /einausgaenge – Digitale Ein- und Ausgänge
- Digitale Eingänge (1–32) mit Statusanzeige
- Digitale Ausgänge (1–4) mit Umschaltfunktion (Toggle)
- Modale für Beschreibung und Konfiguration
🌡️ /analogeEingaenge
- Tabelle mit analogen Eingangswerten (z. B. Temperatur, Spannung)
- Diagramm zur Visualisierung von Verlauf / Trends
📝 /meldungen
- Gesamte Meldungshistorie
- Anzeige von Statusfarbe, Zeit, Gewichtung, Nachricht, Quelle
- Pagination (10 Meldungen pro Seite)
⚙️ /einstellungen
- Allgemeine Systemeinstellungen
- OPC UA Konfiguration
- Benutzer, Verschlüsselung, Clients
- Verbindung & Nodeset-Verwaltung
🔧 Technologien
- Next.js (Pages Router)
- React (mit funktionalen Komponenten & Hooks)
- Tailwind CSS für responsives UI-Design
- Redux Toolkit zur Zustandverwaltung
- Mockdaten im Verzeichnis
public/CPLmockData/ - Iconify Icons & Bootstrap Icons für UI-Darstellung
🔧 Installation auf dem CPLv4.0
git clone http://10.10.0.12:3000/ISA/CPL_V4_Frontend
cd cplv4-frontend
npm install
npm run build
Danach:
Inhalt des out-Verzeichnisses per FTP auf das CPL-Gerät kopieren
Ziel: B → WEBS Verzeichnis