态势感知平台-开源生态与贡献价值全景-社区治理健康度对比接口对接

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

@@ -2,7 +2,7 @@
   <div class="index-module__NV_5cW__chartCard">
     <h3 class="chartCard__title">社区治理健康度对比</h3>
     <div class="chartCard__container">
-      <div class="num-empty" v-if="isEmpty"></div>
+      <div class="num-empty" v-if="isEmpty || loading">加载中...</div>
       <div v-else id="ossCompassChart" class="chart"></div>
     </div>
   </div>
@@ -12,26 +12,52 @@
 import { onMounted, ref, nextTick, watch, onUnmounted, computed } from 'vue';
 import * as echarts from 'echarts';
 import { usePageResize } from '@/utils/hooks/usePageResize';
+import { communityHealthPage2 } from '@/api/jyh/situation';
 
-// 不再接收外部数据，组件内部管理数据
+// 定义数据结构
-const communityHealthData = ref({
+interface CommunityHealthItem {
-  indicators: ['PR 合并率', 'Issue 响应时间', 'CI/CD 使用率', '平均代码质量得分', '安全审计频率', '贡献者多样性'],
+  indicators: string;
-  github: [82, 88, 78, 85, 75, 80],
+  github: number;
-  gitcode: [68, 75, 55, 72, 60, 65]
+  gitcode: number;
-});
+}
 
-// 未来用于API调用的方法
+// 响应式数据存储
+const communityHealthData = ref<CommunityHealthItem[]>([]);
+const loading = ref(true);
+
+// 从API获取数据
 const fetchDataFromApi = async () => {
   try {
-    // 这里是预留的API调用位置，例如：
+    loading.value = true;
-    // const response = await fetch('/api/community-health-data');
+    const response = await communityHealthPage2();
-    // const apiData = await response.json();
-    // communityHealthData.value = apiData;
     
-    // 暂时保留默认数据，实际使用时替换为API返回的数据
+    if (response.code === 200 && response.data) {
-    console.log('Fetching community health data from API...');
+      communityHealthData.value = response.data;
+    } else {
+      console.error('获取社区治理健康度数据失败:', response.msg || '未知错误');
+      // 设置默认数据
+      communityHealthData.value = [
+        { indicators: 'PR 合并率', github: 82, gitcode: 68 },
+        { indicators: 'Issue 响应时间', github: 88, gitcode: 75 },
+        { indicators: 'CI/CD 使用率', github: 78, gitcode: 55 },
+        { indicators: '平均代码质量得分', github: 85, gitcode: 72 },
+        { indicators: '安全审计频率', github: 75, gitcode: 60 },
+        { indicators: '贡献者多样性', github: 80, gitcode: 65 }
+      ];
+    }
   } catch (error) {
-    console.error('Failed to fetch community health data:', error);
+    console.error('获取社区治理健康度数据异常:', error);
+    // 设置默认数据
+    communityHealthData.value = [
+      { indicators: 'PR 合并率', github: 82, gitcode: 68 },
+      { indicators: 'Issue 响应时间', github: 88, gitcode: 75 },
+      { indicators: 'CI/CD 使用率', github: 78, gitcode: 55 },
+      { indicators: '平均代码质量得分', github: 85, gitcode: 72 },
+      { indicators: '安全审计频率', github: 75, gitcode: 60 },
+      { indicators: '贡献者多样性', github: 80, gitcode: 65 }
+    ];
+  } finally {
+    loading.value = false;
   }
 };
 
@@ -45,9 +71,7 @@ const { widthType } = usePageResize();
 
 // 空数据标识
 const isEmpty = computed(() => {
-  return communityHealthData.value.indicators.length === 0 ||
+  return communityHealthData.value.length === 0;
-         communityHealthData.value.github.length === 0 ||
-         communityHealthData.value.gitcode.length === 0;
 });
 
 // 图表实例存储（用于resize时销毁重绘）
@@ -67,7 +91,10 @@ const initCommunityHealthChart = () => {
   const myChart = echarts.init(el);
   chartInstances.value.communityHealthChart = myChart;
 
-  const data = communityHealthData.value;
+  // 提取数据以适应图表需求
+  const indicators = communityHealthData.value.map(item => item.indicators);
+  const githubValues = communityHealthData.value.map(item => item.github);
+  const gitcodeValues = communityHealthData.value.map(item => item.gitcode);
 
   myChart.setOption({
     tooltip: {
@@ -133,7 +160,7 @@ const initCommunityHealthChart = () => {
     },
     xAxis: {
       type: 'category',
-      data: data.indicators,
+      data: indicators,
       axisLabel: {
         fontSize: 11,
         color: '#666',
@@ -176,7 +203,7 @@ const initCommunityHealthChart = () => {
       {
         name: 'GitHub 社区',
         type: 'bar',
-        data: data.github,
+        data: githubValues,
         barWidth: '35%',
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
@@ -206,7 +233,7 @@ const initCommunityHealthChart = () => {
       {
         name: 'GitCode 社区',
         type: 'bar',
-        data: data.gitcode,
+        data: gitcodeValues,
         barWidth: '35%',
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [