updated Readme
This commit is contained in:
rafaeldpsilva
176
README.md
176
README.md
@@ -1,45 +1,171 @@
|
|||||||
# frontend
|
# Real-Time Energy Monitoring Dashboard
|
||||||
|
|
||||||
This template should help get you started developing with Vue 3 in Vite.
|
A comprehensive full-stack application for monitoring and managing energy consumption and air quality in smart buildings. The system provides real-time data visualization, room-based analytics, and intelligent recommendations for building management.
|
||||||
|
|
||||||
## Recommended IDE Setup
|
## 📋 Project Overview
|
||||||
|
|
||||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
This application enables facility managers and building operators to:
|
||||||
|
|
||||||
## Type Support for `.vue` Imports in TS
|
- **Monitor real-time energy consumption** across multiple sensors and rooms
|
||||||
|
- **Track air quality (CO2 levels)** with automated status classification
|
||||||
|
- **Estimate occupancy** based on environmental data patterns
|
||||||
|
- **Receive intelligent recommendations** for HVAC optimization and ventilation
|
||||||
|
- **Visualize building-wide metrics** through interactive charts and dashboards
|
||||||
|
- **Access room-by-room analytics** for targeted energy management
|
||||||
|
|
||||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
## 🏗️ Architecture
|
||||||
|
|
||||||
## Customize configuration
|
### Frontend (Vue.js 3 + TypeScript)
|
||||||
|
- **Reactive dashboard** with real-time chart updates
|
||||||
|
- **Multi-sensor support** with room-based grouping
|
||||||
|
- **Responsive design** optimized for desktop and mobile
|
||||||
|
- **State management** via Pinia for efficient data handling
|
||||||
|
|
||||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
## 🚀 Installation & Setup
|
||||||
|
|
||||||
## Project Setup
|
### Prerequisites
|
||||||
|
|
||||||
```sh
|
- **Redis Server**: Must be running on `localhost:6379`
|
||||||
|
- **Python 3.9+**: Backend runtime
|
||||||
|
- **Node.js 20.19.0+ or 22.12.0+**: Frontend development
|
||||||
|
|
||||||
|
The backend should be available at `http://localhost:8000`
|
||||||
|
|
||||||
|
### Frontend Setup
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd dashboard/frontend
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
npm install
|
npm install
|
||||||
```
|
|
||||||
|
|
||||||
### Compile and Hot-Reload for Development
|
# Start development server
|
||||||
|
|
||||||
```sh
|
|
||||||
npm run dev
|
npm run dev
|
||||||
|
|
||||||
|
# Additional commands
|
||||||
|
npm run build # Production build
|
||||||
|
npm run type-check # TypeScript validation
|
||||||
|
npm run test:unit # Run unit tests
|
||||||
|
npm run lint # ESLint with auto-fix
|
||||||
|
npm run format # Prettier formatting
|
||||||
```
|
```
|
||||||
|
|
||||||
### Type-Check, Compile and Minify for Production
|
The frontend will be available at `http://localhost:5173`
|
||||||
|
|
||||||
```sh
|
## ✨ Features
|
||||||
npm run build
|
|
||||||
|
### 📊 Real-Time Dashboard
|
||||||
|
- **Live energy consumption charts** with automatic updates
|
||||||
|
- **WebSocket-powered data streaming** for zero-latency updates
|
||||||
|
- **Metric cards** showing current values, totals, and averages
|
||||||
|
- **Connection status indicators** with visual feedback
|
||||||
|
|
||||||
|
### 🏢 Room-Based Analytics
|
||||||
|
- **Room overview cards** with energy and CO2 metrics per space
|
||||||
|
- **Occupancy estimation** based on environmental data patterns
|
||||||
|
- **Color-coded status indicators** for quick visual assessment
|
||||||
|
- **Sensor grouping** by room for organized data presentation
|
||||||
|
|
||||||
|
### 🌬️ Air Quality Monitoring
|
||||||
|
- **CO2 level classification**:
|
||||||
|
- 🟢 **Good**: <400 ppm
|
||||||
|
- 🟡 **Moderate**: 400-1000 ppm
|
||||||
|
- 🟠 **Poor**: 1000-5000 ppm
|
||||||
|
- 🔴 **Critical**: >5000 ppm
|
||||||
|
- **Building-wide air quality status** with overall health indicators
|
||||||
|
- **Priority room alerts** sorted by urgency
|
||||||
|
- **Automated recommendations** for ventilation and HVAC adjustments
|
||||||
|
|
||||||
|
### 📱 Responsive Design
|
||||||
|
- **Mobile-optimized interface** with fixed bottom navigation
|
||||||
|
- **Desktop hover interactions** for enhanced UX
|
||||||
|
- **Adaptive layouts** that work across all screen sizes
|
||||||
|
- **Touch-friendly controls** for mobile interactions
|
||||||
|
|
||||||
|
### 📋 Data Management
|
||||||
|
- **Sensor consumption table** with sortable columns
|
||||||
|
- **Multi-format data support** (legacy energy-only + enhanced multi-metric)
|
||||||
|
- **Real-time calculations** for totals, averages, and trends
|
||||||
|
- **Data buffering** to prevent UI blocking during high-frequency updates
|
||||||
|
|
||||||
|
### 🔧 Developer Features
|
||||||
|
- **TypeScript support** for type-safe development
|
||||||
|
- **Hot module replacement** for fast development cycles
|
||||||
|
- **ESLint + Prettier** for consistent code formatting
|
||||||
|
- **Vitest** for unit testing
|
||||||
|
- **Vue DevTools** integration
|
||||||
|
|
||||||
|
## 📊 Data Formats
|
||||||
|
|
||||||
|
### Legacy Format (Energy Only)
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"sensorId": "sensor_1",
|
||||||
|
"timestamp": 1672531200,
|
||||||
|
"value": 2.34,
|
||||||
|
"unit": "kWh"
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Run Unit Tests with [Vitest](https://vitest.dev/)
|
### Enhanced Format (Multi-Metric)
|
||||||
|
```json
|
||||||
```sh
|
{
|
||||||
npm run test:unit
|
"sensorId": "sensor_1",
|
||||||
|
"room": "Conference Room A",
|
||||||
|
"timestamp": 1672531200,
|
||||||
|
"energy": {
|
||||||
|
"value": 2.34,
|
||||||
|
"unit": "kWh"
|
||||||
|
},
|
||||||
|
"co2": {
|
||||||
|
"value": 450,
|
||||||
|
"unit": "ppm"
|
||||||
|
},
|
||||||
|
"temperature": {
|
||||||
|
"value": 22.5,
|
||||||
|
"unit": "°C"
|
||||||
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lint with [ESLint](https://eslint.org/)
|
## 🔗 Key Endpoints
|
||||||
|
|
||||||
```sh
|
- **WebSocket**: `ws://localhost:8000/ws` - Real-time data streaming
|
||||||
npm run lint
|
- **Frontend**: `http://localhost:5173` - Dashboard interface
|
||||||
```
|
- **Backend API**: `http://localhost:8000` - FastAPI server
|
||||||
|
|
||||||
|
## 🎯 Use Cases
|
||||||
|
|
||||||
|
- **Smart Building Management**: Monitor energy usage and air quality across facilities
|
||||||
|
- **HVAC Optimization**: Receive data-driven recommendations for climate control
|
||||||
|
- **Occupancy Tracking**: Estimate room usage for space optimization
|
||||||
|
- **Environmental Compliance**: Track CO2 levels for health and safety requirements
|
||||||
|
- **Cost Management**: Analyze energy consumption patterns for cost reduction
|
||||||
|
- **Predictive Maintenance**: Identify equipment issues through anomaly detection
|
||||||
|
|
||||||
|
## 🛠️ Technology Stack
|
||||||
|
|
||||||
|
**Frontend:**
|
||||||
|
- Vue.js 3 (Progressive framework)
|
||||||
|
- TypeScript (Type safety)
|
||||||
|
- Pinia (State management)
|
||||||
|
- Vue Router (Client-side routing)
|
||||||
|
- Vite (Build tool)
|
||||||
|
- Tailwind CSS (Styling)
|
||||||
|
- ECharts (Data visualization)
|
||||||
|
- Vitest (Testing framework)
|
||||||
|
|
||||||
|
## 📈 Future Enhancements
|
||||||
|
|
||||||
|
- Historical data storage and analysis
|
||||||
|
- Machine learning predictions for energy consumption
|
||||||
|
- Integration with building automation systems
|
||||||
|
- Mobile app for on-the-go monitoring
|
||||||
|
- Advanced alerting and notification system
|
||||||
|
- Multi-tenant support for building portfolios
|
||||||
|
- Energy cost calculation and reporting
|
||||||
|
- Weather data correlation for HVAC optimization
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
⚡ by gecad for smarter, more efficient buildings.
|
||||||
|
|||||||
Reference in New Issue
Block a user