会友信息管理系统 - 考勤打卡功能和设备 API 集成

Message ID: Fi30V5K

package-lock.json

@@ -8,6 +8,7 @@
       "name": "member-management-system",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.27.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "xlsx": "^0.18.5"
@@ -738,6 +739,20 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.24.2",
       "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.24.2.tgz",
@@ -810,6 +825,17 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -850,6 +876,14 @@
         }
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.55",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz",
@@ -902,6 +936,38 @@
         "node": ">=6"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/frac": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz",
@@ -1003,6 +1069,25 @@
         "node": ">=12"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "axios": "^0.27.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.jsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
+import AttendanceSystem from './components/AttendanceSystem';
 
 function App() {
   return (
     <div className="App">
       <h1>会友信息管理系统</h1>
-      <p>欢迎使用会友信息管理系统！</p>
+      <AttendanceSystem />
     </div>
   );
 }

src/api/deviceApi.js

@@ -0,0 +1,49 @@
+import axios from 'axios';
+
+const API_BASE_URL = 'http://your-device-api-url.com'; // 替换为实际的设备 API URL
+
+export const deviceApi = {
+  getDeviceInfo: async () => {
+    try {
+      const response = await axios.get(`${API_BASE_URL}/GetDeviceInfo`);
+      return response.data;
+    } catch (error) {
+      console.error('获取设备信息失败:', error);
+      throw error;
+    }
+  },
+
+  getPersonInfo: async (personId) => {
+    try {
+      const response = await axios.get(`${API_BASE_URL}/GetPersonInfo`, {
+        params: { personId }
+      });
+      return response.data;
+    } catch (error) {
+      console.error('获取人员信息失败:', error);
+      throw error;
+    }
+  },
+
+  addPerson: async (personInfo) => {
+    try {
+      const response = await axios.post(`${API_BASE_URL}/AddPerson`, personInfo);
+      return response.data;
+    } catch (error) {
+      console.error('添加人员失败:', error);
+      throw error;
+    }
+  },
+
+  getAttendanceRecords: async (startTime, endTime) => {
+    try {
+      const response = await axios.get(`${API_BASE_URL}/GetAttendanceRecords`, {
+        params: { startTime, endTime }
+      });
+      return response.data;
+    } catch (error) {
+      console.error('获取考勤记录失败:', error);
+      throw error;
+    }
+  }
+};

src/components/AttendanceSystem.jsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { deviceApi } from '../api/deviceApi';
+
+const AttendanceSystem = () => {
+  const [deviceInfo, setDeviceInfo] = useState(null);
+  const [attendanceRecords, setAttendanceRecords] = useState([]);
+
+  useEffect(() => {
+    fetchDeviceInfo();
+    fetchAttendanceRecords();
+  }, []);
+
+  const fetchDeviceInfo = async () => {
+    try {
+      const info = await deviceApi.getDeviceInfo();
+      setDeviceInfo(info);
+    } catch (error) {
+      console.error('获取设备信息失败', error);
+    }
+  };
+
+  const fetchAttendanceRecords = async () => {
+    try {
+      const endTime = new Date().toISOString();
+      const startTime = new Date(new Date().setDate(new Date().getDate() - 7)).toISOString();
+      const records = await deviceApi.getAttendanceRecords(startTime, endTime);
+      setAttendanceRecords(records);
+    } catch (error) {
+      console.error('获取考勤记录失败', error);
+    }
+  };
+
+  return (
+    <div>
+      <h2>考勤系统</h2>
+      {deviceInfo && (
+        <div>
+          <h3>设备信息</h3>
+          <p>设备ID: {deviceInfo.deviceId}</p>
+          <p>设备名称: {deviceInfo.deviceName}</p>
+        </div>
+      )}
+      <h3>考勤记录</h3>
+      <ul>
+        {attendanceRecords.map((record, index) => (
+          <li key={index}>
+            人员ID: {record.personId}, 打卡时间: {record.timestamp}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default AttendanceSystem;