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

Message ID: VeWdMto

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;