README.md Update
This commit is contained in:
Ismail Ali
189
README.md
189
README.md
@@ -1,102 +1,157 @@
|
|||||||
# ⚡ CPLv4.0 – Frontend für das Kabelüberwachungssystem
|
# ⚡ CPLv4.0 – Frontend für das Kabelüberwachungssystem
|
||||||
|
|
||||||
Das Frontend von CPLv4.0 stellt verschiedene Systeminformationen, Messdaten und Konfigurationen übersichtlich dar.
|
Das CPLv4.0 Frontend stellt eine moderne, übersichtliche Weboberfläche für die Anzeige und Steuerung von Systemdaten bereit.
|
||||||
Die Benutzeroberfläche ist intuitiv und modular aufgebaut und bietet Zugriff auf digitale sowie analoge Ein-/Ausgänge, TDR-Messungen, Referenzkurven, Systemmeldungen und Einstellungen.
|
Die Benutzeroberfläche ist modular aufgebaut und ermöglicht Zugriff auf digitale und analoge Ein-/Ausgänge, TDR-Messungen, Referenzkurven, Systemmeldungen, Einstellungen und Systemspannungen.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🧭 Seitenübersicht
|
## 📘 Projektübersicht
|
||||||
|
|
||||||
|
| Bereich | Beschreibung |
|
||||||
|
| :--------------- | :----------------------------------------------------- |
|
||||||
|
| Framework | Next.js (Pages Router) |
|
||||||
|
| UI | React 18, Tailwind CSS, Iconify Icons, Bootstrap Icons |
|
||||||
|
| State Management | Redux Toolkit (Slices, Thunks) |
|
||||||
|
| Diagramme | Chart.js (für Messkurven) |
|
||||||
|
| Dokumentation | Mermaid.js Diagramme in `/docsForDev/` |
|
||||||
|
| Mock-Daten | über `/apiMockData/SERVICE/` und über API-Handler |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 Seitenübersicht
|
||||||
|
|
||||||
### 🔹 **Header**
|
### 🔹 **Header**
|
||||||
|
|
||||||
- Zeigt den Namen der Station / des Geräts (CPL)
|
- Anzeigen von CPL-Gerätenamen
|
||||||
- Abmelden-Button für Admins
|
- Abmelden-Button (Admin-Logout)
|
||||||
|
|
||||||
### 🔹 **Footer**
|
### 🔹 **Footer**
|
||||||
|
|
||||||
- Firmenname, Telefonnummer, E-Mail
|
- Firmenname, Supportdaten
|
||||||
- PDF-Handbücher (Anleitung) als Slider mit Download-Funktion
|
- PDF-Slider für Anleitungen (Handbücher)
|
||||||
|
|
||||||
---
|
### 📈 **/dashboard**
|
||||||
|
|
||||||
### 🖥️ **/dashboard** – Übersicht
|
- Letzte 20 Systemmeldungen
|
||||||
|
|
||||||
- Letzten 20 Meldungen aus dem System
|
|
||||||
- Versionsinformationen (Frontend, Backend)
|
- Versionsinformationen (Frontend, Backend)
|
||||||
- Baugruppenträger mit Modulnamen und Statusanzeige (grün = OK, rot = Fehler)
|
- Modulstatus-Anzeige (Baugruppenträger)
|
||||||
- Netzwerk-Informationen:
|
- Netzwerkdaten (IP, Subnetz, Gateway, OPC UA Status)
|
||||||
- IP-Adresse
|
|
||||||
- Subnetzmaske
|
|
||||||
- Gateway
|
|
||||||
- OPC UA Status (in Betrieb oder offline)
|
|
||||||
- OPC UA Nodeset Name
|
|
||||||
|
|
||||||
---
|
### 🛋️ **/kabelueberwachung**
|
||||||
|
|
||||||
### 📡 **/kabelueberwachung** – Kabelüberwachung
|
- Visualisierung aller Slots (1-32) in 4 Baugruppenträgern
|
||||||
|
- Schleifen- und Isolationsmessung
|
||||||
|
- TDR-Messung & Referenzkurvenvergleich
|
||||||
|
- Alarme pro Slot (z.B. Erdschluss, Aderbruch)
|
||||||
|
|
||||||
- Visualisierung der Slots (KUE 1–32) in 4 Racks
|
### 🔦 **/einausgaenge**
|
||||||
- Darstellung von:
|
|
||||||
- Isolationswiderstand
|
|
||||||
- Schleifenwiderstand
|
|
||||||
- TDR-Messkurven und Vergleich mit Referenzkurve
|
|
||||||
- Alarme (z. B. Erdschluss, Aderbruch)
|
|
||||||
- Einstellung pro Slot (via Zahnrad → Modal)
|
|
||||||
|
|
||||||
---
|
- Digitale Eingänge (1–32) mit Live-Status
|
||||||
|
- Digitale Ausgänge (1–4) mit Schaltfunktion
|
||||||
|
|
||||||
### 🔌 **/einausgaenge** – Digitale Ein- und Ausgänge
|
### 📉 **/analogeEingaenge**
|
||||||
|
|
||||||
- Digitale Eingänge (1–32) mit Statusanzeige
|
- Tabellenübersicht über analoge Werte
|
||||||
- Digitale Ausgänge (1–4) mit Umschaltfunktion (Toggle)
|
- Live-Trend-Diagramm für Messdaten
|
||||||
- Modale für Beschreibung und Konfiguration
|
|
||||||
|
|
||||||
---
|
### 📜 **/meldungen**
|
||||||
|
|
||||||
### 🌡️ **/analogeEingaenge**
|
- Gesamte Historie aller Systemmeldungen
|
||||||
|
- Farbcodierung je nach Gewichtung (Info, Warnung, Alarm)
|
||||||
- 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**
|
### ⚙️ **/einstellungen**
|
||||||
|
|
||||||
- Allgemeine Systemeinstellungen
|
- Systemkonfiguration
|
||||||
- OPC UA Konfiguration
|
- OPC UA Benutzerverwaltung, Verschlüsselung, Nodeset-Verwaltung
|
||||||
- Benutzer, Verschlüsselung, Clients
|
|
||||||
- Verbindung & Nodeset-Verwaltung
|
### 🔌 **/system**
|
||||||
|
|
||||||
|
- Live-Anzeige von:
|
||||||
|
- +5V, +15V, -15V, -98V Spannungen
|
||||||
|
- CPU- und ADC-Temperaturen
|
||||||
|
- Verlaufskurven über Zeit (Chart.js)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🔧 Technologien
|
## 🔧 Installation & Lokale Entwicklung
|
||||||
|
|
||||||
- **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
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
# Repository klonen
|
||||||
git clone http://10.10.0.12:3000/ISA/CPL_V4_Frontend
|
git clone http://10.10.0.12:3000/ISA/CPL_V4_Frontend
|
||||||
cd cplv4-frontend
|
cd CPL_V4_Frontend
|
||||||
|
|
||||||
|
# Abhängigkeiten installieren
|
||||||
npm install
|
npm install
|
||||||
|
|
||||||
|
# Entwicklungsserver starten
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# öffnen unter:
|
||||||
|
http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚨 Deployment auf CPL-Gerät
|
||||||
|
|
||||||
|
```bash
|
||||||
npm run build
|
npm run build
|
||||||
|
|
||||||
Danach:
|
# Danach Inhalt des /out Verzeichnisses über FTP hochladen
|
||||||
Inhalt des out-Verzeichnisses per FTP auf das CPL-Gerät kopieren
|
# Zielordner: B:/WEBS/ auf dem CPL Embedded-System
|
||||||
Ziel: B → WEBS Verzeichnis
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📅 Redux-Management
|
||||||
|
|
||||||
|
| Slice | Zweck |
|
||||||
|
| :------------------ | :------------------------------------------------------------ |
|
||||||
|
| systemVoltTempSlice | Verwaltung von Spannungs-/Temperaturdaten & Historie |
|
||||||
|
| tdrChartSlice | Verwaltung der TDR-Messkurven |
|
||||||
|
| loopChartSlice | Verwaltung Schleifen-/Isolationsmessung |
|
||||||
|
| weitere Slices | für digitale Eingänge, analoge Eingänge, Systemmeldungen etc. |
|
||||||
|
|
||||||
|
### Thunks
|
||||||
|
|
||||||
|
- `fetchSystemVoltTempThunk.ts`
|
||||||
|
- `fetchDigitalOutputsThunk.ts`
|
||||||
|
- `fetchAnalogeEingaengeThunk.ts`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 Entwicklerdokumentation
|
||||||
|
|
||||||
|
**Diagramme unter `/docsForDev/Diagramme/systemVoltTemp/`**:
|
||||||
|
|
||||||
|
| Diagramm | Beschreibung |
|
||||||
|
| :------------------------- | :----------------------------------------- |
|
||||||
|
| systemVoltTempFlow.md | Flowchart: Seiten-Ablauf |
|
||||||
|
| systemVoltTempReduxFlow.md | Redux-Datenfluss |
|
||||||
|
| systemVoltTempSequence.md | Sequenzdiagramm: Datenfluss im Zeitverlauf |
|
||||||
|
|
||||||
|
Angezeigt mit [Mermaid.js](https://mermaid-js.github.io/).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💬 Besonderheiten
|
||||||
|
|
||||||
|
- **Mock-Datenunterstützung** für lokale Entwicklung ohne echtes CPL-Gerät
|
||||||
|
- **Echtzeitupdates** alle 5 Sekunden für alle Systemdaten
|
||||||
|
- **Skalierbare Architektur** dank Redux und modularer Komponentenstruktur
|
||||||
|
- **Responsives Design** optimiert für Desktop und Tablet
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📢 Zukünftige Verbesserungen
|
||||||
|
|
||||||
|
- Vollständige TypeScript-Unterstützung
|
||||||
|
- WebSocket-Anbindung für noch schnellere Live-Daten
|
||||||
|
- Verbesserte Fehlerbehandlung (UI/UX Optimierungen)
|
||||||
|
- Optimierung der Build-Größe und Ladezeiten
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 👋 Kontakt für Fragen
|
||||||
|
|
||||||
|
Bei Fragen oder Problemen bitte an das CPLv4.0 Entwicklungsteam wenden.
|
||||||
|
|||||||
Reference in New Issue
Block a user