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([]); +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; } };