Accueil Explorer Aide
S'inscrire Connexion
d8dfun
/
member-attendance-system-njWOfO-I
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

AI: 优化会友信息考勤打卡系统

D8D AI il y a 1 an
Parent
bb730030e8
commit
80c3938e6a
2 fichiers modifiés avec 54 ajouts et 20 suppressions
Vue unifiée Afficher les stats Diff
  1. 38 17
      public/index.html
  2. 16 3
      server/index.js

+ 38 - 17
public/index.html
Voir le fichier 

@@ -4,26 +4,31 @@
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>会友信息考勤打卡系统</title>
 
     <title>会友信息考勤打卡系统</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
 
     <style>
 
     <style>
 
-        body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; }
 
-        h1 { color: #333; }
 
-        form { margin-bottom: 20px; }
 
-        input, button { margin: 5px 0; padding: 5px; }
 
-        ul { list-style-type: none; padding: 0; }
 
-        li { background: #f4f4f4; margin-bottom: 5px; padding: 10px; }
 
+        body { padding-top: 20px; }
 
+        .container { max-width: 800px; }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-    <h1>会友信息考勤打卡系统</h1>
 
-    
-    <form id="addMemberForm">
 
-        <input type="text" id="memberName" placeholder="输入会员姓名" required>
 
-        <button type="submit">添加会员</button>
 
-    </form>
 
+    <div class="container">
 
+        <h1 class="mb-4">会友信息考勤打卡系统</h1>
 
+        
+        <form id="addMemberForm" class="mb-4">
 
+            <div class="input-group">
 
+                <input type="text" id="memberName" class="form-control" placeholder="输入会员姓名" required>
 
+                <button type="submit" class="btn btn-primary">添加会员</button>
 
+            </div>
 
+        </form>
 
 
 
-    <h2>会员列表</h2>
 
-    <ul id="memberList"></ul>
 
+        <h2>会员列表</h2>
 
+        <ul id="memberList" class="list-group mb-4"></ul>
 
 
 
+        <h2>设备状态</h2>
 
+        <ul id="deviceList" class="list-group"></ul>
 
+    </div>
 
+
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 
     <script>
 
     <script>
 
         const API_URL = '/api';
 
         const API_URL = '/api';
 
 
 
@@ -32,10 +37,12 @@
 
             const members = await response.json();
 
             const members = await response.json();
 
             const memberList = document.getElementById('memberList');
 
             const memberList = document.getElementById('memberList');
 
             memberList.innerHTML = members.map(member => `
 
             memberList.innerHTML = members.map(member => `
 
-                <li>
 
+                <li class="list-group-item d-flex justify-content-between align-items-center">
 
                     ${member.name} 
                     ${member.name} 
-                    <button onclick="recordAttendance(${member.id})">记录考勤</button>
 
-                    <button onclick="viewAttendance(${member.id})">查看考勤</button>
 
+                    <div>
 
+                        <button onclick="recordAttendance('${member._id}')" class="btn btn-sm btn-success">记录考勤</button>
 
+                        <button onclick="viewAttendance('${member._id}')" class="btn btn-sm btn-info">查看考勤</button>
 
+                    </div>
 
                 </li>
 
                 </li>
 
             `).join('');
 
             `).join('');
 
         }
 
         }
 
@@ -68,7 +75,21 @@
 
             alert(`考勤记录：\n${attendance.join('\n')}`);
 
             alert(`考勤记录：\n${attendance.join('\n')}`);
 
         }
 
         }
 
 
 
+        async function fetchDevices() {
 
+            const response = await fetch(`${API_URL}/devices`);
 
+            const devices = await response.json();
 
+            const deviceList = document.getElementById('deviceList');
 
+            deviceList.innerHTML = devices.map(device => `
 
+                <li class="list-group-item d-flex justify-content-between align-items-center">
 
+                    ${device.name} (${device.deviceId})
 
+                    <span class="badge bg-${device.status === 'online' ? 'success' : 'danger'} rounded-pill">${device.status}</span>
 
+                </li>
 
+            `).join('');
 
+        }
 
+
 
         fetchMembers();
 
         fetchMembers();
 
+        fetchDevices();
 
+        setInterval(fetchDevices, 30000); // 每30秒更新一次设备状态
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 16 - 3
server/index.js
Voir le fichier 

@@ -2,6 +2,7 @@ const express = require('express');
 
 const cors = require('cors');
 
 const cors = require('cors');
 
 const mongoose = require('mongoose');
 
 const mongoose = require('mongoose');
 
 const dotenv = require('dotenv');
 
 const dotenv = require('dotenv');
 
+const path = require('path');
 
 const { publishPersonInfo } = require('./mqtt-handler');
 
 const { publishPersonInfo } = require('./mqtt-handler');
 
 
 
 dotenv.config();
 
 dotenv.config();
 
@@ -18,6 +19,15 @@ mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/member-attendan
 
 .then(() => console.log('Connected to MongoDB'))
 
 .then(() => console.log('Connected to MongoDB'))
 
 .catch(err => console.error('Could not connect to MongoDB:', err));
 
 .catch(err => console.error('Could not connect to MongoDB:', err));
 
 
 
+// 路由
 
+const membersRouter = require('./routes/members');
 
+const attendanceRouter = require('./routes/attendance');
 
+const devicesRouter = require('./routes/devices');
 
+
 
+app.use('/api/members', membersRouter);
 
+app.use('/api/attendance', attendanceRouter);
 
+app.use('/api/devices', devicesRouter);
 
+
 
 // 示例路由：下发人员信息
 
 // 示例路由：下发人员信息
 
 app.post('/api/publish-person-info', (req, res) => {
 
 app.post('/api/publish-person-info', (req, res) => {
 
   const personInfo = req.body;
 
   const personInfo = req.body;
 
@@ -25,9 +35,12 @@ app.post('/api/publish-person-info', (req, res) => {
 
   res.json({ message: 'Person info published to MQTT' });
 
   res.json({ message: 'Person info published to MQTT' });
 
 });
 
 });
 
 
 
-// 添加一个简单的GET路由用于测试
 
-app.get('/', (req, res) => {
 
-  res.send('Member Attendance System API is running');
 
+// 静态文件服务
 
+app.use(express.static(path.join(__dirname, '../public')));
 
+
 
+// 处理所有其他路由，返回 index.html
 
+app.get('*', (req, res) => {
 
+  res.sendFile(path.join(__dirname, '../public', 'index.html'));
 
 });
 
 });
 
 
 
 const PORT = process.env.PORT || 5000;
 
 const PORT = process.env.PORT || 5000;