A modern employee attendance and vehicle monitoring management system built with Vue.js and Node.js, supporting QR code check-in, real-time monitoring, and data analytics.
- Employee Information Management – Comprehensive employee profile management
- QR Code Check-In/Out – Fast QR-based sign-in and sign-out
- Attendance Analytics – Detailed attendance records and reports
- Certificate Management – Employee certificate maintenance and expiry reminders
- Vehicle Information Management – Maintain detailed vehicle profiles
- Real-Time Location Tracking – GPS tracking and route playback
- Violation Detection – Monitor speeding, boundary crossing, and other violations
- Maintenance Reminders – Automatic reminders for servicing, inspection, etc.
- Real-Time Dashboard – Key metrics visualized at a glance
- Attendance Reports – Multi-dimensional attendance analysis
- Vehicle Reports – Vehicle utilization statistics
- Violation Analytics – Violation trends and analysis
- User Authentication – JWT-based user authentication
- Role-Based Access Control – Fine-grained permission management
- System Settings – Flexible system configuration
- Data Backup – Automated data backup and recovery
- Framework: Vue.js 3 + TypeScript
- Build Tool: Vite
- UI Library: Element Plus
- State Management: Pinia
- Routing: Vue Router
- Charts: ECharts
- Maps: AMap (Gaode) API
- Styling: CSS3 + Responsive Design
- Runtime: Node.js
- Framework: Express.js
- Database: SQLite
- Authentication: JWT (JSON Web Tokens)
- File Uploads: Multer
- API Design: RESTful API
- Package Management: npm workspaces (monorepo)
- Code Quality: ESLint + Prettier
- Version Control: Git
- IDE: VS Code
monitoring-system/
├── apps/
│ ├── frontend/ # Vue.js frontend app
│ │ ├── src/
│ │ │ ├── components/ # Common components
│ │ │ ├── views/ # Page components
│ │ │ ├── stores/ # Pinia state stores
│ │ │ ├── router/ # Route configuration
│ │ │ ├── utils/ # Utility functions
│ │ │ └── assets/ # Static assets
│ │ ├── public/ # Public resources
│ │ └── package.json
│ └── backend/ # Node.js backend app
│ ├── routes/ # API routes
│ ├── middleware/ # Middleware
│ ├── uploads/ # File uploads directory
│ ├── database.db # SQLite database
│ ├── server.js # Server entry point
│ └── package.json
├── docs/ # Project documentation
├── scripts/ # Development scripts
├── package.json # Root package.json
└── README.md # Project overview
- Node.js >= 16.0.0
- npm >= 8.0.0
# Clone repository
git clone <repository-url>
cd monitoring-system
# Install dependencies
npm install
# Install concurrently (to run frontend and backend together)
npm install concurrently --save-devnpm run dev.\scripts\dev.ps1# Start backend (Terminal 1)
cd apps/backend
npm run dev
# Start frontend (Terminal 2)
cd apps/frontend
npm run dev- Frontend: http://localhost:5173
- Backend API: http://localhost:3000
- API Docs: http://localhost:3000/api-docs (if configured)
- Username:
admin - Password:
123456
VITE_API_URL=http://localhost:3000
VITE_APP_TITLE=Employee Attendance and Vehicle Monitoring SystemPORT=3000
JWT_SECRET=your-secret-key
DATABASE_URL=./database.dbThe project uses SQLite. The database file and schema will be automatically created on first run.
POST /auth/login– User loginPOST /auth/logout– User logoutGET /auth/profile– Get user profile
GET /api/employees– Get employee listPOST /api/employees– Create employeePUT /api/employees/:id– Update employeeDELETE /api/employees/:id– Delete employee
GET /api/attendance– Get attendance recordsPOST /api/attendance/checkin– Check inPOST /api/attendance/checkout– Check outGET /api/attendance/qrcode– Generate QR code for check-in
GET /api/vehicles– Get vehicle listPOST /api/vehicles– Add vehiclePUT /api/vehicles/:id– Update vehicleGET /api/vehicles/:id/location– Get vehicle location
GET /api/statistics/dashboard– Dashboard dataGET /api/statistics/attendance– Attendance statisticsGET /api/statistics/vehicles– Vehicle statistics
- Backend: Add new route in
apps/backend/routes/ - Frontend: Add new page in
apps/frontend/src/views/ - Update router configuration and navigation menu
// Example: query employees
const employees = await db.all('SELECT * FROM employees WHERE status = ?', ['active']);// Example using Pinia store
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
await authStore.login(credentials)# Frontend tests
cd apps/frontend
npm run test
# Backend tests
cd apps/backend
npm run testOpen /test-frontend.html to test frontend functionality.
# Build frontend
cd apps/frontend
npm run build
# Build backend (if necessary)
cd apps/backend
npm run build- Frontend: Deploy to CDN or static hosting
- Backend: Deploy to Node.js server
- Database: Migrate to production database (MySQL/PostgreSQL recommended)
- Fork the repository
- Create a new branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Submit a Pull Request
This project is licensed under the MIT License – see the LICENSE file for details.
If you encounter any issues, please submit them via GitHub Issues or contact the development team.
- Maintainer: David Du
- Email: dupt321@gmail.com
- Repository: https://github.com/DDuu123321/Intelligent-management-system
Last Updated: September 2, 2024
Version: v1.0.0