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

src/views/Jyh/ecosystem/components/InfrastructureCoverageChart.vue

@@ -12,9 +12,39 @@
 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([
+// 基础颜色配置
+const baseColors = ['#00F0FF', '#FFAB00', '#B20003'];
+
+// 定义数据结构
+interface InfrastructureItem {
+  name: string;
+  value: number;
+}
+
+// 响应式数据存储
+const infrastructureData = ref<InfrastructureItem[]>([]);
+const loading = ref(true);
+
+// 从API获取数据
+const fetchDataFromApi = async () => {
+  try {
+    loading.value = true;
+    const response = await infrastructurePage2();
+    
+    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,
@@ -33,20 +63,33 @@ const infrastructureData = ref([
           color: '#B20003',
           radius: ['30%', '40%']
         }
-]);
-
-// 未来用于API调用的方法
-const fetchDataFromApi = async () => {
-  try {
-    // 这里是预留的API调用位置，例如：
-    // const response = await fetch('/api/infrastructure-data');
-    // const apiData = await response.json();
-    // infrastructureData.value = apiData;
-    
-    // 暂时保留默认数据，实际使用时替换为API返回的数据
-    console.log('Fetching infrastructure data from API...');
+      ];
+    }
   } 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;
   }
 };