态势感知平台-开源生态与贡献价值全景-基础设施覆盖率接口对接

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;
   }
 };