From 119b2f0ec5fd6cb9296498ebe49e45e8f8086c42 Mon Sep 17 00:00:00 2001
From: d266377 <d266377@noreply.gitcode.com>
Date: Wed, 28 Jan 2026 15:41:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=81=E5=8A=BF=E6=84=9F=E7=9F=A5=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0-=E5=BC=80=E6=BA=90=E7=94=9F=E6=80=81=E4=B8=8E?=
 =?UTF-8?q?=E8=B4=A1=E7=8C=AE=E4=BB=B7=E5=80=BC=E5=85=A8=E6=99=AF-?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E8=AE=BE=E6=96=BD=E8=A6=86=E7=9B=96=E7=8E=87?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InfrastructureCoverageChart.vue           | 101 +++++++++++++-----
 1 file changed, 72 insertions(+), 29 deletions(-)

diff --git a/src/views/Jyh/ecosystem/components/InfrastructureCoverageChart.vue b/src/views/Jyh/ecosystem/components/InfrastructureCoverageChart.vue
index f61f212..5f44665 100644
--- a/src/views/Jyh/ecosystem/components/InfrastructureCoverageChart.vue
+++ b/src/views/Jyh/ecosystem/components/InfrastructureCoverageChart.vue
@@ -12,41 +12,84 @@
 import { onMounted, ref, nextTick, watch, onUnmounted, computed } from 'vue';
 import * as echarts from 'echarts';
 import { usePageResize } from '@/utils/hooks/usePageResize';
+import { infrastructurePage2 } from '@/api/jyh/situation';
 
-// 不再接收外部数据，组件内部管理数据
-const infrastructureData = ref([
-  {
-    name: '镜像站规模',
-    value: 85,
-    color: '#00F0FF',
-    radius: ['70%', '80%']
-  },
-  {
-    name: '代码托管平台规模',
-    value: 90,
-    color: '#FFAB00',
-    radius: ['50%', '60%']
-  },
-  {
-    name: '构建平台活跃度',
-    value: 40,
-    color: '#B20003',
-    radius: ['30%', '40%']
-  }
-]);
+// 基础颜色配置
+const baseColors = ['#00F0FF', '#FFAB00', '#B20003'];
 
-// 未来用于API调用的方法
+// 定义数据结构
+interface InfrastructureItem {
+  name: string;
+  value: number;
+}
+
+// 响应式数据存储
+const infrastructureData = ref<InfrastructureItem[]>([]);
+const loading = ref(true);
+
+// 从API获取数据
 const fetchDataFromApi = async () => {
   try {
-    // 这里是预留的API调用位置，例如：
-    // const response = await fetch('/api/infrastructure-data');
-    // const apiData = await response.json();
-    // infrastructureData.value = apiData;
+    loading.value = true;
+    const response = await infrastructurePage2();
     
-    // 暂时保留默认数据，实际使用时替换为API返回的数据
-    console.log('Fetching infrastructure data from API...');
+    if (response.code === 200 && response.data) {
+      // 为每个数据项添加颜色和半径配置
+      infrastructureData.value = response.data.map((item: InfrastructureItem, index: number) => ({
+        name: item.name,
+        value: item.value,
+        color: baseColors[index % baseColors.length],
+        radius: [`calc(${70 - index * 20}%)`, `calc(${80 - index * 20}%)`] // 根据索引计算半径
+      }));
+    } else {
+      console.error('获取基础设施覆盖率数据失败:', response.msg || '未知错误');
+      // 设置默认数据
+      infrastructureData.value = [
+        {
+          name: '镜像站规模',
+          value: 85,
+          color: '#00F0FF',
+          radius: ['70%', '80%']
+        },
+        {
+          name: '代码托管平台规模',
+          value: 90,
+          color: '#FFAB00',
+          radius: ['50%', '60%']
+        },
+        {
+          name: '构建平台活跃度',
+          value: 40,
+          color: '#B20003',
+          radius: ['30%', '40%']
+        }
+      ];
+    }
   } catch (error) {
-    console.error('Failed to fetch infrastructure data:', error);
+    console.error('获取基础设施覆盖率数据异常:', error);
+    // 设置默认数据
+    infrastructureData.value = [
+      {
+        name: '镜像站规模',
+        value: 85,
+        color: '#00F0FF',
+        radius: ['70%', '80%']
+      },
+      {
+        name: '代码托管平台规模',
+        value: 90,
+        color: '#FFAB00',
+        radius: ['50%', '60%']
+      },
+      {
+        name: '构建平台活跃度',
+        value: 40,
+        color: '#B20003',
+        radius: ['30%', '40%']
+      }
+    ];
+  } finally {
+    loading.value = false;
   }
 };