diff --git a/web/src/api/index.js b/web/src/api/index.js
index b29b9e2..7104957 100644
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -47,6 +47,16 @@ export default {
     return http.get('/devices/', params)
   },
 
+  /**
+   * 获取算法 
+   */
+  getAlgorithms(params) {
+    return http.get('/algorithms/', params)
+  },
+
+
+
+
   /**
    * 上传视频文件
    */
diff --git a/web/src/components/algorithm/AlgorithmCenter.vue b/web/src/components/algorithm/AlgorithmCenter.vue
index b9c774f..9bc802c 100644
--- a/web/src/components/algorithm/AlgorithmCenter.vue
+++ b/web/src/components/algorithm/AlgorithmCenter.vue
@@ -1,10 +1,9 @@
-<!-- src/components/algorithm/AlgorithmCenter.vue -->
 <template>
   <div class="algorithm-center">
     <div class="algorithm-grid">
       <AlgorithmCard 
         v-for="(algorithm, index) in algorithms" 
-        :key="index"
+        :key="algorithm.id"
         :algorithm="algorithm"
       />
     </div>
@@ -12,70 +11,83 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
 import AlgorithmCard from './AlgorithmCard.vue'
+import API from '@/api/index'
 
-const algorithms = [
-  {
-    name: '非法登轮识别算法',
-    taskTypes: ['区域入侵检测', '行为识别'],
-    detectionCount: '68,000'
-  },
-  {
-    name: '靠泊状态检测算法',
-    taskTypes: ['靠泊检测', '静态目标跟踪'],
-    detectionCount: '5,124'
-  },
-  {
-    name: '打瞌睡检测算法',
-    taskTypes: ['姿态识别', '行为识别'],
-    detectionCount: '1,025'
-  },
-  {
-    name: '值班离岗检测算法',
-    taskTypes: ['手部动作识别', '行为识别'],
-    detectionCount: '90,128'
-  },
-  {
-    name: '佩戴证件识别算法',
-    taskTypes: ['属性识别', '目标特征比对'],
-    detectionCount: '6,094'
-  },
-  {
-    name: '非法律行识别算法',
-    taskTypes: ['人体轨迹跟踪', '滞留时长分析'],
-    detectionCount: '5,080'
-  },
-  {
-    name: '暴力动作检测算法',
-    taskTypes: ['多人姿态动作识别', '非正常行为判定'],
-    detectionCount: '8,300'
-  },
-  {
-    name: '异常靠近设备算法',
-    taskTypes: ['电脑未锁屏', '人脸识别'],
-    detectionCount: '3,456'
-  },
-  {
-    name: '违章品携带检测',
-    taskTypes: ['接近行为追踪', '人体-物体关系识别'],
-    detectionCount: '7,890'
-  },
-  {
-    name: '注意力评估算法',
-    taskTypes: ['可疑动作追踪', '头部朝向识别'],
-    detectionCount: '4,321'
-  },
-  {
-    name: '危险区域闯入检测',
-    taskTypes: ['行为持续性分析', '区域入侵检测'],
-    detectionCount: '9,876'
-  },
-  {
-    name: '异常聚集检测算法',
-    taskTypes: ['人群密度分析', '行为识别'],
-    detectionCount: '5,678'
+const algorithms = ref([])
+
+// 从API获取算法数据
+const fetchAlgorithms = async () => {
+  try {
+    const response = await API.getAlgorithms()
+    
+    // 转换API返回的数据结构为前端需要的格式
+    algorithms.value = response.algorithms.map(alg => {
+      // 解析JSON字符串格式的tags和detection_classes
+      const tags = tryParseJson(alg.tags) || []
+      const detectionClasses = tryParseJson(alg.detection_classes) || []
+      
+      return {
+        id: alg.id,
+        name: alg.name,
+        description: alg.description,
+        version: alg.version,
+        taskTypes: detectionClasses, // 使用检测类别作为任务类型
+        detectionCount: formatNumber(Math.floor(Math.random() * 100000)), // 随机生成检测数量(示例)
+        status: alg.status,
+        isEnabled: alg.is_enabled,
+        accuracy: alg.accuracy,
+        inputSize: alg.input_size,
+        inferenceTime: alg.inference_time,
+        tags: tags,
+        createdAt: alg.created_at,
+        updatedAt: alg.updated_at,
+        modelPath: alg.model_path
+      }
+    })
+  } catch (error) {
+    console.error('获取算法数据失败:', error)
+    // 使用默认数据作为后备
+    algorithms.value = [
+      {
+        id: 1,
+        name: '靠泊检测',
+        taskTypes: ['person', 'ship'],
+        detectionCount: '68,000',
+        description: '检测船舶靠泊过程中的关键行为',
+        status: 'active'
+      },
+      {
+        id: 2,
+        name: '离泊检测',
+        taskTypes: ['person', 'ship'],
+        detectionCount: '5,124',
+        description: '检测船舶离泊过程中的关键行为',
+        status: 'active'
+      }
+    ]
   }
-]
+}
+
+// 尝试解析JSON字符串
+const tryParseJson = (str) => {
+  try {
+    return JSON.parse(str)
+  } catch (e) {
+    return null
+  }
+}
+
+// 格式化数字为千位分隔符格式
+const formatNumber = (num) => {
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchAlgorithms()
+})
 </script>
 
 <style scoped>