态势感知平台-武汉市开源生态建设-统计概览2 接口对接

src/views/Jyh/Community/components/StatsBar.vue

@@ -1,31 +1,89 @@
 <template>
   <div class="stats-glass-bar">
     <div class="stat-node">
-      <span class="stat-value">150+</span>
+      <span class="stat-value">{{ whCompany }}</span>
       <span class="stat-desc">武汉开源企业</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
-      <span class="stat-value">12</span>
+      <span class="stat-value">{{ whCommunity }}</span>
       <span class="stat-desc">武汉开源社区数量</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
-      <span class="stat-value">70W+</span>
+      <span class="stat-value">{{ whDeveloper }}</span>
       <span class="stat-desc">武汉开源开发者数量</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">
-      <span class="stat-value">500+</span>
+      <span class="stat-value">{{ whProject }}</span>
       <span class="stat-desc">武汉开源项目数量</span>
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-export default {
+import { ref, onMounted } from 'vue';
-name: "StatsBar"
+import { statsBarPage3 } from '@/api/jyh/situation';
-}
+
+// 定义响应式数据
+const whCompany = ref<string>('加载中...');
+const whCommunity = ref<string>('加载中...');
+const whDeveloper = ref<string>('加载中...');
+const whProject = ref<string>('加载中...');
+
+// 加载状态
+const loading = ref(true);
+
+// 格式化数字的工具函数
+const formatNumber = (num: number, unit: string = ''): string => {
+  if (num >= 100000000) {
+    return (num / 100000000).toFixed(1) + '亿';
+  } else if (num >= 10000) {
+    return (num / 10000).toFixed(1) + '万';
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + '千';
+  }
+  return num.toString();
+};
+
+// 获取统计数据
+const fetchStats = async() => {
+  try {
+    loading.value = true;
+    const response = await statsBarPage3();
+
+    if (response.code === 200 && response.data) {
+      const { developer, community, company, project } = response.data;
+      
+      // 格式化数据显示
+      whDeveloper.value = `${formatNumber(developer)}+`;
+      whCommunity.value = formatNumber(community);
+      whCompany.value = `${formatNumber(company)}+`;
+      whProject.value = `${formatNumber(project)}+`;
+    } else {
+      console.error('获取统计数据失败:', response.msg || '未知错误');
+      // 设置默认值
+      whDeveloper.value = '70万+';
+      whCommunity.value = '12';
+      whCompany.value = '150+';
+      whProject.value = '500+';
+    }
+  } catch (error) {
+    console.error('获取统计数据异常:', error);
+    // 设置默认值
+    whDeveloper.value = '70万+';
+    whCommunity.value = '12';
+    whCompany.value = '150+';
+    whProject.value = '500+';
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchStats();
+});
 </script>
 
 <style lang="scss" scoped>